Hooks let developers use state and other React features without writing a class. Hooks were introduced in React 16.8 to facilitate programmers in the reusability of React code.
They are the functions that "hook into" React state and lifecycle features from function components. It does not work inside classes.
When would I use a Hook?
If writing a function component and realizing the need to add some state to it, previously we had to convert it to a class. Now we can use a Hook inside the existing function component.
Rules of Hooks:
Hooks should only be called from the top level of your React function
Hooks must not be called from nested code (e.g., loops, conditions).
Hooks may also be called at the top level from custom Hooks.
Now letās look at the two hooks which are most confused between š¬
useState Hook: š
Definition:
useState hook is the primary building block that enables functional components to hold state between re-renders. It enables the development of the component state for functional components.
We see how much the code is reduced significantly and using functional components and hook also makes code much clearer by not using this keyword and eliminating a wrapper constructor within class component.
What does useState do? š¤
First of all, it declares āstate variablesā. It is used to preserve value between the function calls. Normally, common Javascript variables like ( let, var, const) disappear after the function call. However, state variables preserve the values.
Explaining the Syntax:
[count,setCount]=useState(0)
count is the state variable that will be used to represent the value assigned using the hook.
setCount is a functional variable whose sole purpose is updating count state variable.
Within brackets, after useState initial argument is passed which is used for the initial value of the count after initial rendering.
Square Brackets mean that when we declare a state variable with useState it returns an array with two items. The first one is the current value and the second is a function that updates it.
React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount
When the App component re-renders, its children would re-render.
The useRef Hook allows persisting values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.
It does everything that useState does but without re-rendering the components.
useRefreturns a mutable ref object whose .currentproperty is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
The major question that arises is why use useRef if we have useState? š¤
Easier to work with as updates are synchronous.
Do not trigger re-render. Performance optimization.
Prevents render thrashing
Can be used if we want the state to presist value throughout the component lifecycle.
If we want to access the DOM element directly useRef should be used.
We see that component only renders after button click function rather than rendering on each keystroke.
When we āsubmitā the input with a button to update the state variable value.With the refproperty, React provides direct access to React components or HTML elements.
<input ref={valueRef} />
If this had been done using useState and onChange which each keystroke input the component would have re-rendered. With each keystroke, component is re-rendered.
We see that in effect in the below code and itās output in CodeSandBox.
valueRef is the variable that stores the value to be persisted.
Within the brackets, after the useRef statement, it is provided the initial value which should be assigned to useRef on the first render.
We see that within the Button click function we access value within valueRef using .current keyword. This is because useRef is like a box that holds its mutable value in its .current property.
Keep in mind that useRefdoesnātnotify when its content changes. Mutating the .currentproperty doesnāt cause a re-render.
Gotcha! š³
Examples of different use cases for useState vs useRef: š¤
We have already seen two major use cases for useRef over useState
Accessing DOM input using ref directly.
Persisting values of mutable variables and not causing re-renders on updation.
Letās see some more use cases of these points.
In the first example, we simply try counting the no of renders using useRef and useState.
This above code will cause infinite renders as every time rendercount value is updated the entire component is re-rendered.
useRef code:
Equivalent use case can be achieved using useRef whererin within useEffect hook ( important to use within useEffect to avoid side effects) rendercount.current value is updated which doesnāt trigger any re rendering.
Both preserve their data during render cycles and UI updates, but only the useState Hook with its updater function causes re-renders.
useRef returns an object with a current property holding the actual value. In contrast, useState returns an array with two elements: the first item constitutes the state, and the second item represents the state updater function
current property in useRef is mutable however useState state variable is not. We need updater function to update useState state variable.
useState and useRef both are Hooks, but only useRef can be used to gain direct access to React components or DOM elements.
