Introduction

React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events.

Hooks are basically functions (special ones) that let you “hook into” React features like state and lifecycle features from function components.

Hooks enable you to maintain state and handle side effects in functional components. Before hooks functional components were considered dumb or stateless components as they always have the same output for same input(no side effects).

Rules of Hooks

The following the are rules of hooks provided by React docs which are also used by the linter:

• Starts with use and component where we use the hooks must be uppercase.
• Can be invoked only inside component body or custom hooks.
• Don't call hooks conditionally, can't call them in if-else/switch etc.
• Hooks not available with class component.
• Can't use hooks inside other hooks except custom hooks.

<aside> ⚠️ We can't use hooks in conditionals but we can use conditionals in the function of hooks.

</aside>

React relies on the order in which Hooks are called to know which state corresponds to which useState call. As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. That’s why hooks are not allowed inside conditionals.

<aside> 💡 React provide a linter plugin to enforce these rules automatically. So not following these rules will not break anything in react app if you are not using linter but they are considered good practice.

</aside>

useState

This is a function in which we pass the initial state that return an array which has the reactive state with current state value and a function to update the state.

The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render

During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates.

It’s similar to this.setState in a class, except it doesn’t merge the old and new state together.

<aside> ⚠️ useState is used to make a mutable state, and with change in that state the re-rendering happen.

</aside>

useState preserves the state value between the renders and then it triggers re-render.

Unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

Function to update the reactive state.

Because React doesn't run setState synchronously there is a second argument that can optionally be passed to setState is a callback function which gets called immediately after the setState is completed and the components get re-rendered. This is used if we wanna do something after the state is updated.

But In state hooks there's nothing like the second argument callback function of setState. React automatically batches state updates in function components, and the "official" way to get rid of it is to use ReactDOM.flushSync().

useReducer

Reducer related concepts

• Store: an object that has all our states for a particular component.
  • State is just a mutable data. State store is just an object that store all the states.
• Action: an object that has it's type which tells about what action to perform and other data(payload).
  • Action only tell us what we wanna do.
  • Action know what task we wanna do but not how to do it.
• Reducer: a function that take the old state and an action object(with action type and data) from dispatch and do things according to the action and return the new state.
  • Reducer does all the work (deal with our data) specified by action(logic).
  • Reducer know how to do a task but not when to do what.
• Dispatch: a function that take an action object (which has action type and other data for that action) and pass it to reducer.
  • Dispatch is like a button that triggers the reducer, it basically connect the action and the reducer.
  • Dispatch is the missing link between action and reducer it give the action to the reducer and reducer do the task accordingly and return new state basically it trigger a particular action.
  • It is like setState to us so we as a developer use the dispatch to do the task.
  • Dispatch function takes in an action object as a parameter which has action's type and other data (payload) in it. Action type is just a string which tell what reducer should do.
• Action and Reducer alone are nothing they are both separate things. This way is more organised then setState where every state is scattered.

useReducer() is a function in which we pass the reducer function and the initial state, and it return an array which has a reactive state we can share with UI and a dispatch function(which dispatches an action).

<aside> 📔 Reducer function takes in the old state and the action and return a new state. It must always return a state

</aside>

useEffect

useEffect, adds the ability to perform side effects from a function component.

• Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase) as react don’t understand how to handle them resulting in some undefined behaviors and hence should be put in useEffect hook.

It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API. When you call useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM.