Most Commonly Used React Hooks

I recently learned about React and the great capabilities it offered when trying to build an application. Through my learning, I was challenged with the task of using React without using class components. I couldn't imagine how I would be able to do that, until I was informed about React hooks. Today I will talk about the three most common React hooks and how they eliminate the need for class components.

What are React hooks?

React Hooks are functions in React that let you add state and other React features to functional components. Hooks were introduced in React 16.8 and give another option instead of writing a class-based component in React.

Hooks make it easier to reuse existing code and manage the state of the application. Hooks also make it easier to understand how the state and other React functions and lifecycle methods are used in your components.

Most Used Hooks

While there are numerous React hooks, I am going to focus on what I think are the three most commonly used hooks. They are 'useState', 'useEffect', and 'useContext'.

These three hooks are pretty essential for building your web application in React. First I will explain them briefly, then go a little in depth with each one.

The useState hook allows you to add and use state in your components, while the useEffect hook lets you perform side effects. The useContext hook gives you access to context values in your components. Let's take a closer look at useState first.

'useState'

The useState hook helps to add and manage state on a functional component. The useState hook returns an array with two elements: the current value of the state, and a function for updating the state.

Below is an example on how to use the useState hook in React. First import useState, then set the two elements inside an array equal to the function with the option to pass in a default value for state. Here I am using the number zero, since I will be working with numbers in this example.

import { useState } from 'react';

const Component = () => {
  const[number, setNumber] = useState(0);
  return (
    <div>
      Pressed button {number} times
      <button onClick={ () => setNumber(number + 1)}>
        Press</button>
    </div>
  );
};

The number is a property on the state. I attached the function setNumber to a button, so that when the button is pressed the setNumber function will update the state by adding one to zero.

'useEffect'

The useEffect hook lets you run side effects in response to changes in state or props in functional components. The useEffect hook also takes two arguments: a callback function that contains the side effect code or logic, and an array that determines when the side effect should be run. The useEffect hook can be used for running side effects, such as making API calls, setting up event listeners, and updating the DOM.

In the example below, we import useEffect just like we did with useState. To keep it simple, I put in a console log, which will display the number that is currently on state. Now, notice in the array, I put in the number property from state. This means that the effect will run only if the number changes on state. A really cool alternative would be if I leave the array empty, useEffect would then only run on initial render, very similar to the lifecycle method componentDidMount.

import { useState, useEffect } from 'react';

const Component = () => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log(`Number: ${number}`);
  }, [number]);

  return (
    <div>
      You pressed the button {number} times
      <button onClick={ () => setNumber(number + 1)}>
        Press</button>
    </div>
  );
}

'useContext'

The useContext hook lets you get the values of a context in a functional component. It takes a context object as an argument and returns the current value of the context. It also makes things easier by getting access to context without having to pass the data down through multiple levels of components using props.

For the last example, we create a context using the createContext function and provide an object that is the initial state of the context. Then, use the useContext hook inside Component to subscribe to the context and access the values. Next, you can wrap the component that uses the context with a ThemeContext.Provider component and pass it the current theme value.

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext({ theme: 'light' });

const Component = () => {
  const { theme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>The current theme is: {theme}</p>
    </div>
  );
}

const AnotherComponent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme }}>
      <Component />
    </ThemeContext.Provider>
  );
}

In Closing

So there you have it. These three essential React hooks not only eliminate the need for class components, but also make functional components more useful and give developers more tools to use on their tool belts. I am now looking forward to getting more experience with the other hooks React has to offer.