React Hooks at a Glance

Photo by Efe Kurnaz on Unsplash

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:

Image by author

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.

Image by thankyougif

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.

Image by author

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.

  1. Without a second argument, the function will run on every render.
  2. When the second argument is an empty array, it just runs on the first render.
  3. 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.

Image by author

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.

Image from Luke Dwyer

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.

Image by author

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

Image from tyrannosaurustech

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.

Image by author

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

Image by author

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.

Image by author

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.

Image by author

Now you can get the response just by calling the useFetch hook.

Image by author

You can find whole codes in the below repository:

--

--

--

A forward-looking programmer who loves writing and learning

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top JavaScript Libraries to know

Ways to create React apps from scratch

Memory Management in JavaScript

How to Display Text in Your HTML as Code Snippets

CSR (Client Side Rendering) and SSR(Server Side Rendering)?

Using Styled-components custom properties with your React App

Vue 2 Unit Testing Primer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hanie Asemi

Hanie Asemi

A forward-looking programmer who loves writing and learning

More from Medium

An Easy Way to Add Multiple Themes in a React App

React Remix starter guide

Creating a Modern React Project Vite, TypeScript, Test, EsLint, Prettier, Lint-Staged, Commitlint…

Implementing authentication in Remix Applications with Supabase