|
| 1 | +--- |
| 2 | +sidebar_position: 2 |
| 3 | +slug: what-are-hooks |
| 4 | +--- |
| 5 | + |
| 6 | +# What Are Hooks? |
| 7 | + |
| 8 | +:::info Hooks are all about memoization |
| 9 | +It is an optimization technique. |
| 10 | +The memoization function caches the last return value and would return the cached value if the inputs are the same as the previous function call. |
| 11 | +::: |
| 12 | + |
| 13 | +Hooks memoize and protect the variables and functions within the React component from being re-created on each re-render. Different hooks memoize different things. |
| 14 | + |
| 15 | +That's the default behavior in class components, but we are trying to mimic that in function components! |
| 16 | + |
| 17 | +## `useCallback` |
| 18 | + |
| 19 | +This hook memoizes a function. It takes a callback function as param to memoize. Whenever the component re-renders, the useCallback function will be called again and again, and each time it'll return the exact same function reference, as long as the dependency doesn't change. So the returned function will remain same, as if it was defined outside the react-component. |
| 20 | + |
| 21 | +```tsx |
| 22 | +function UserComponent({ user }) { |
| 23 | + const userName = useCallback( |
| 24 | + // 👇 This function is memoized |
| 25 | + // highlight-start |
| 26 | + () => { |
| 27 | + const name = user.name; |
| 28 | + return `user: ${name}`; |
| 29 | + }, |
| 30 | + // highlight-end |
| 31 | + [user], |
| 32 | + ); |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +In this example, `UserComponent` component, which a javascript function can be called as many times as required as part of re-rendering the component, but if the `user` prop doesn't change, then `userName` function will remain exactly same. It will not be re-created. |
| 37 | + |
| 38 | +But when the `user` prop does change, then the `useCallback` hook will return a brand new function, re-created new instance. |
| 39 | + |
| 40 | +## `useMemo` |
| 41 | + |
| 42 | +This hook has the exact same signature as `useCallback`. Except, it memoizes a value, not the function. The value returned from the callback function is memoized, not the function itself. If it's dependencies don't change, it will not call the callback function it'll return the previous value which the hook has cached. |
| 43 | + |
| 44 | +It will call the callback function for a fresh value only when the dependencies change |
| 45 | + |
| 46 | +```tsx |
| 47 | +function UserComponent({ user }) { |
| 48 | + const userName = useMemo(() => { |
| 49 | + const name = user.name; |
| 50 | + // 👇 This return value is memoized |
| 51 | + // highlight-next-line |
| 52 | + return `user: ${name}`; |
| 53 | + }, [user]); |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +In this example, useMemo will call the passed callback function on the first render and return the return-value of the callback function. Then whenever the component re-renders the useMemo function will be called to get the value for `userName`, but the useMemo will not call the callback function if the dependency: user object hasn't changed, instead it will return the previous cached value. |
| 58 | + |
| 59 | +## `useState` |
| 60 | + |
| 61 | +It's a weird one. All other hooks memoize something that's passed to the hook function as param. But unlike other hooks, It's not memoizing the value passed to the useState function. It's memoizing the return value of the useState function. And the passed value is just the initial value to be memoized. |
| 62 | + |
| 63 | +The memoized value doesn't change when some dependency (input) change, it doesn't even have a dependency array. Instead it gives us a dedicated function for changing the memoized value. And this function not only updates the memoized value but also triggers the re-render of the component. |
| 64 | + |
| 65 | +```jsx |
| 66 | +function UserComponent({ user: usr }) { |
| 67 | + const [ |
| 68 | + // 👇 This value is memoized |
| 69 | + // highlight-next-line |
| 70 | + user, |
| 71 | + setUser, |
| 72 | + ] = useState(usr); |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +## `useEffect` |
| 77 | + |
| 78 | +This hook memoizes the side-effect. Yeah it sounds weird, basically, we're telling react, to run this callback anytime the dependency values change. |
| 79 | + |
| 80 | +```jsx |
| 81 | +function UserComponent({ user }) { |
| 82 | + useEffect( |
| 83 | + // 👇 This function (side-effect) is memoized |
| 84 | + // highlight-next-line |
| 85 | + () => doSomething(), |
| 86 | + [user], |
| 87 | + ); |
| 88 | +} |
| 89 | +``` |
0 commit comments