React Hooks are a powerful feature in React that allow developers to use state and other React features in functional components, instead of relying solely on class components. Hooks were introduced in React 16.8 and have quickly become a popular way to write reusable and easy-to-read code.

In this post, we’ll explore the basics of React Hooks and learn how to use them in your applications.

What are React Hooks?

React Hooks are functions that allow you to use React features in functional components. They were introduced in React 16.8 and are a new way to write reusable code that can be shared across components. Hooks provide a way to use state, context, and other React features without having to write class components.

There are several built-in React Hooks, including useState, useEffect, and useContext. These Hooks allow you to manage state, handle side effects, and consume context in your functional components.

useState Hook

The useState Hook is used to manage state in a functional component. It takes an initial state value and returns an array with two elements: the current state value and a function to update the state.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In the example above, we use the useState Hook to manage the count state. We set the initial value to 0 and get back the current value and a function to update it (setCount). We then use these values to render the count and update it when the button is clicked.

useEffect Hook

The useEffect Hook is used to handle side effects in a functional component. It takes a callback function that is executed after every render of the component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [time]);

  return <p>Time: {time} seconds</p>;
}

In the example above, we use the useEffect Hook to start a timer that updates the time state every second. We return a cleanup function that clears the interval when the component is unmounted.

useContext Hook

The useContext Hook is used to consume context in a functional component. It takes a context object created by React.createContext and returns the current value of the context.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function Button() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ backgroundColor: theme.background, color: theme.foreground }}>
      Click me!
    </button>
  );
}

In the example above, we use the useContext Hook to consume the current theme from a context object. We then use this theme to set the background and foreground colors of the button.

Conclusion

React Hooks provide a new way to write reusable and easy-to-read code in functional components. They allow you to use state, context, and other React features without relying solely on class components. In this post, we explored the useState, useEffect, and useContext Hooks and learned how to use them in your applications.