React Hooks at a Glance

4 min readApr 30, 2022

Functional Components in React

Similar to a Class component, a Function component will also return JSX, but uses less code and is more understandable. Remember, functional components in React look like the following:

There have been several types of React components in the past, but now that React Hooks are available, it’s possible to write your entire application with just functions as React components.

Hooks

You may know the function components as stateless components, but it’s possible to use states in the functional component with hooks.

So, hooks are functions that let you hook into React state and lifecycle features from function components. Hooks don’t work inside classes.

So Let’s deep dive into the subject and get familiar with different types of hooks.

React.useState Hook

The state can be added to function components using the useState hook. Here’s an example that shows we save the message as a state and update it with just one click using the React.useState hook.

React.useEffect Hook

We’re using the React.useEffect hook to tell the component that it needs to do something after rendering. For example, fetching data. This hook accepts two arguments.

useEffect(<function>,<dependency>)'

The second argument is optional and with passing the second argument we can control when the useEffect’s function is running.

Without a second argument, the function will run on every render.
When the second argument is an empty array, it just runs on the first render.
If the second argument is a prop or state it will run on the first render and any time that argument changes.

In the below code after rendering the component we’re trying to fetch data from the API and update the state of the component.

React.useReducer Hook

The useState hook is useful when you want to manage trivial states. But using the useState hook will be difficult where you need to add, remove or update the state. In this situation, the useReducer hook comes to the rescue.

The React.useReducer Hook returns an array that holds the current state and a dispatch method. This hook lets store the state for the next usage and we can handle different logics like add, delete, edit just by adding an action. Here’s an example of using the useReducer hook.

In the above example, we have a useReducer function that accepts the current state of users and action to update the state. When the action type is dispatched as load the users will be updated based on the action.payload. Then with const [userState, usersDispatch] = useReducer(userReducer, {users:[]}); code, we declared state with the useReducer hook and after rendering the component we fetch data and then call the userDispatch method with load type to store the response in the usersState. Now you can get the users just by userState.users.

React.useContext Hook

An image is worth a thousand words. This image describes that with using useContext and useReducer and other hooks that we defined you no longer need to use Redux or other state containers. Here is an example of using the useContext hook.

As you see in the above code to create the context instance we’re using the createContext.

In order to use the Context in a child component, we need to access it using the useContext Hook. Then wrap child components in the Context Provider and supply the state value.

Custom Hook

Building your own Hooks lets you extract component logic into reusable functions. In the below code we’re trying to create a custom hook that will be used to fetch data.