React 18

• React 18

useDeferredValue

O gancho useDeferredValue é uma adição útil ao React 18, destinada a melhorar o desempenho de renderização de componentes. Ele permite adiar a renderização de um componente até que uma condição específica seja atendida. Isto é especialmente útil ao lidar com cenários que envolvem a exibição de grandes conjuntos de dados ou a execução de cálculos que consomem muitos recursos.

// App.js

import {
useDeferredValue,
useEffect,
useState,
} from 'react';

import Search from './Search';

const ExampleFunction = () => {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

return (
	<div style={{ margin: "5rem", }}>
	<div className='tutorial'>
		<input
		type='text'
		value={query}
		onChange={(e) => setQuery(e.target.value)}
		placeholder='Search...'
		/>
		<Search text={deferredQuery} />
	</div>

	</div>
);
};

export default ExampleFunction;