Photo by Peter Gombos on Unsplash

How Senior Engineers Use React Hooks

React Hooks, introduced in React 16.8, provide a new way to work with effects, state, and more in your React functional components. Hooks allow developers to extract stateful logic from a component, which can then be tested independently and reused. This also leads to more readable code as related pieces of functionality can be grouped together.

This tutorial will provide an in-depth understanding of how to use the built-in React Hooks and how to define your own custom Hooks, and the benefits they bring to the table. This tutorial is aimed at senior engineers who are looking to level up their skills and knowledge in React Hooks.

State Hooks

The useState and useReducer hooks are the most common hooks that you will use when managing state in your React components. They allow components to "remember" information between renders, which could be anything from user input to data fetched from an API.

The useState hook declares a state variable that can be updated directly. It takes the initial state as its argument and returns an array with the current state and a function to update it. Here's an example:

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...
}

In this ImageGallery component, we declare a state variable called index with a default value of 0. We also get a function called setIndex that we can use to update index. This is a simple yet powerful hook that forms the backbone of state management in functional components.

Context Hooks

The useContext hook is used to consume a React context within a functional component. React Context provides a way to pass data through the component tree without having to pass props down manually at every level. Here's an example:

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

In the Button component above, we use the useContext hook to consume a ThemeContext. This allows us to use the current theme within the component without having to receive it as a prop【7†source】.

Ref Hooks

The useRef hook is used to create a ref, which can hold any mutable value in its .current property…