The Magnificent 7 Hooks of React
With the introduction of Hooks, functional components can add more functionalities like the use of state, lifecycle methods and better understand the written code. React comes with 7 Hooks that can help you in the development of components.
These 7 hooks are:
Using this Hook, you tell React that your component needs to do something after render that can invoke a side effect. React will remember the function you passed (we’ll refer to it as our “effect”) and call it later after performing the DOM updates.
useEffect is good for:
- Fetching data
- Reading from local storage
- Registering and deregistering event listeners
useState is a Hook that lets you add state to function component.
The useState hook is a special function that takes the initial state as an argument and returns an array of two entries.
The first element is the initial state and the second one is a function that is used for updating the state.
Is used to store data. But unlike useState which triggers an update(re-renders) whenever the state change.
useRef is good for:
· To access DOM elements.
· To persist values in successive renders.
· A data store just like useState.
· Easily exposes DOM elements (access them directly).
· Has single property called current.
· Used to store the previous state.
· Used to pass the data through the re-renders.
useContext” hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level. Context defined will be available to all the child components without involving “prop
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
useMemo allows you to memoize(the result is “remembered” when the same parameters are passed-in subsequently) on a functions so that you can avoid calling them on every render. You pass in a function and an array of inputs, and useMemo will only recompute the memoized value when one of the inputs has changed.
useCallback is helpful when passing callback props to highly optimised child components.
For example, if a child component that accepts a callback relies on a referential equality check (eg:
shouldComponentUpdate) to prevent unnecessary re-renders when its props change, then it is important that any callback props do not change between renders.
An alternative to
useState. usually preferable to
useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
useReducer also lets you optimize performance for components that trigger deep updates because you can pass
dispatch down instead of callbacks.