By the way, what the heck is a dependency array? If you had built any website using React you will come up with this feature.
Nowadays many of us are using functional components, to manage the state in these components, we use hooks.
If we use the hooks like use effect, use callback, useMemo we need to pass function to these hooks and also a dependency array. What's the use of it?
Let's know about it.
The functions we pass into these hooks are going to execute if and only if the values we passed into the dependency array are changed. Let's understand this with an example.
useEffect(()=>{
// code
},[value1,value2])
For the initial render obviously, the callback is going to execute. From the next renders, the callback is going is execute only if the value1 or value2 changes.
If the value changes from 10 => 11 or 'Hello' => 'hello', this callback is going to execute.
What happens if our value is an object or a function?? Let's see about that.
As we know that whenever the state updates in a component, the component is going to run again and initializes the values again and built the components again to make use of it in the virtual DOM.
These hooks tried to compare the values in the dependency array from the previous render value with the current render values. As we know that in JavaScript.
let a = { name : "abhiani"};
let b = { name : "abhinai"};
a === b // false
This feature is not specific to REACT, it is a feature that is made available by the js.
What if the values are functions?
function a(){
return 1;
}
function b(){
return 1;
}
a === b // false
To avoid creating functions, and objects again and again we can use the hooks like useCallback(functions) and useMemo(for objects).
useCallback(()=>{
},[]) // empty array
// returns the callback function and executes the callback only one time
useMemo(()=>{
return something
},[]) // empty array
// returns a value/object and executes the callback only one time
As these values are not generated again and again we can use these values in the useEffect for performing side effects.
But we also need to specify the dependency array for these hooks.
So let's see some good practices to use the dependency array properly
Try to put the primitive values in the dependency array.
For functions try to use the useCallback hook with empty dependencies
If you want to use an object is compulsory, you can use
JSON.stringify.
This type of feature is not only in dependency arrays, whenever you are using useSelector hook in redux, you need to pass a function which returns a value from the state. If that value is changed in the store then the component is going to render again.
useSelector(state => state.user) // what if the value is object
Even if the values in the object doesnot changes, this component is going to render again and again if there is any update in the store regardless of that value.
To avoid this behaviour, we can pass a function as second argument.
useSelector(state => state.user, equalityFn)
equalityFn takes 2 arguments, the previous state and and the current state and we can write our own functionality and render the component on our custom logic.
After reading this blog i hope you follow these good practices from now onwards.
Thank you :)