* useEffect
Guide url
- The useEffect Hook allows you to perform side effects (tác vụ liên quan đến hiệu suất) in your components, ex: fetching data, directly updating the DOM, and timers.
useEffect(() => {
//Runs on every render, dependencies = null
});
useEffect(() => {
//Runs only on the first render, dependencies = []
}, []);
useEffect(() => {
//Runs on the first render, dependencies = [prop, state]
//And any time any dependency value changes
}, [prop, state]);
useEffect(() => {
// Thực hiện tác vụ sau mỗi lần render
return () => {
// Thực hiện tác vụ khi component bị unmount hoặc dependencies thay đổi
};
}, [prop, state]);
* useMemo
Guide Url
- use to optimize performance by returning a memoized value.
- when render, if dependencies:
+ change: will calculate again
+ not change: will not calculate => optimize
const calculation = useMemo(
() => expensiveCalculation(count),
[/* dependencies */]
);
<h2>Expensive Calculation {calculation}</h2>
* useCallback
Guide Url
- use to optimize performance by returning a memoized callback function.
- when render, if dependencies:
+ change: will create new version callback function
+ not change: will not create new version callback function
=> do not rerender component use this callback function => optimize
const memoizedCallback = useCallback(() => {
// Logic xử lý khi click
}, [/* dependencies */]);
<button onClick={memoizedCallback}>Click me</button>;
Thank you
