Guide On The React Hooks

In this blog we’re going to talk Hooks of reactJS, and their working and use cases. first of all, why we need hooks.

Hooks are built in React functions which introduced in react version16.8. Which allow developers to use react features like lifecycle methods, state, and context etc in the functional components.

Here, You’ll gain valuable insights into React.js development, learning how to:

Benefits Of Using Hooks.

1. Using classes in react always quite confusing, as developer you need to constantly remember to bind event handlers and manage of this keyword in class component is also confusing

2. Hooks code look shorter and also better in readability and it’s far more easy to work with hooks in functional component.

Rules Of Using ReactJs Hooks.

1. Call Hooks at the top level of a component.
2. Call Hooks in react functional component.

Common ReactJs Hooks

• useState
• useEffect
• use-Context

useState Hook

useState is used to manipulate the state or you can say value in the functional component, setState method will update the value of state and also done the re rendering of the functional component

const [state, setState] = useState(false);

useEffect Hook

useEffect is same as the componentDidMount , componentDidUpdate and componentWillUnMount life cycle methods all combined in one function.

This acts us lifecycle methods in functional component.

In useEffect() method we define dependency array in which we define values, when the value of dependency array change.

It cause the re-rendering of the useEffect(), and if you place empty array then it will call itself all the time.

useEffect(() => {
 // Write your logic here
},[ ])
// dependency array

useContext Hook

useContext Hooks make the state and data global accessible to all components.

By using context, you can resolve problems like props drilling.

It acts as a replaceable of redux when it’s comes for small projects of react.js, for read more about the useContext check its offical documentation.

const value = useContext(MyContext);

That’s all for this blog, If you like this blog you can check my other works also. How to Implement Authetication using nextjs middleware

Happy Coding !!