React Hooks are in-built functions that allow React developers to use state and lifecycle methods inside functional components. And yes, they also work together with existing code. Here are 5 React Hooks you should know:
The useState() Hook allows React developers to update, handle and manipulate state inside functional components. This is, probably, the most popular React Hook
Here's to use the useState() react hook:
The useEffect() hook accepts a function that would contain effectual code, like mutations, subscriptions, timers, logging etc. This is probably the most controversial React Hook 😉
Here's how to use the useEffect() React Hook:
The useRef() Hook returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).
Here's how to use the useRef() React Hook:
The useContext() Hook gives functional components easy access to the React app context.
Here's how to use the useContext() react hook:
The useLayoutEffect() Hook is similar to useEffect(), however, it fires synchronously after all DOM mutations, so timing is important.
Here's how to use the useLayoutEffect() React Hook: