Odi Pearl
React Hooks

React Hooks

A comprehensive journey into react hooks

Odi Pearl's photo
Odi Pearl
·

10 min read

Table of contents

Okay, so you know how in React, we previously talked about these things called components, right? They are like building blocks for our website.

Now, think of React Hooks as special tools that make it easier to do certain things with these components. Before Hooks, doing some stuff was a bit tricky, especially if you were using functional components. But now, with Hooks, it's like having a set of tools that help you manage and control different aspects of your components more easily.

Types of React Hooks
In this section, we'll break down React Hooks into two distinct categories, each serving a unique purpose. The first set — useState, useEffect, and useContext — forms the foundation, simplifying the management of state, side effects, and shared values.

1) useState
With useState, you create a little storage space within your component to keep track of changing values. For example, it could be the score in a game, the user's name, or whether a button was clicked. This hook ensures your component can remember and use these values throughout its lifecycle. Let's take for example:

import React, { useState } from 'react';

function Scoreboard() {
  const [score, setScore] = useState(0);

  return (
    <div>
      <p>Score: {score}</p>
      <button onClick={() => setScore(score + 1)}>Increment</button>
    </div>
  );
}

In this example, score is the state which was initially set to 0, and setScore is the function you use to update that state. Every time the button is clicked, the score state is incremented (Increased by one), and the component re-renders.

useEffect
In React, the useEffect hook is a tool we use to handle tasks that happen outside of our component's main job like fetching data from a server, interacting with the browser, or setting up subscriptions.

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? 
        <p>Data: {data}</p> : 
        'Loading...'
      }
    </div>
  );
}

export default DataFetcher;

Let's break this down a little bit

  • import React, { useState, useEffect } from 'react';: This line imports the React library and the useState and useEffect hooks from it.

  • function DataFetcher() { ... }: This declares a functional component named DataFetcher.

  • const [data, setData] = useState(null);: This initializes a state variable data with null as its initial value, and a function setData to update it.

  • useEffect(() => { ... }, []);: The effect hook runs once when the component mounts. It fetches data from an API endpoint and updates the data state with the fetched data using: fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data));

Let's also break this down...

Fetch Data: This line starts a process to get information from a specific web address or API, 'https://api.example.com/data'.

Process Response: After the server responds, we use .then() to handle it. Inside, there might be data in a special format (JSON), like reading a document in a foreign language. We use .json() to translate it into a language we understand.

Update State: Now that we understand the information, setData(data) helps us remember it. It's like updating our memory with the latest information so our webpage can show it

In this example, useEffect is like a special compartment where we can do extra things. We're using it to fetch some data when our component first shows up on the screen. The data is then stored in a special storage called state, and our component uses this data to update what it shows to the user.

useContext
The useContext hook in React is used to access the values provided by a Context. Context in React is a way to pass data through the component tree without having to pass props manually at every level. It's particularly useful for sharing values like themes, authentication status, or any kind of global configuration. Imagine you're building a fun app that allows users to switch between light and dark themes. You want to create components that dynamically adapt to the selected theme. useContext is the perfect tool for the job. Here's a simple example:

import React, { useContext } from 'react';

// Create a context
const ThemeContext = React.createContext('light');

// Component consuming the context
function ThemedButton() {
  // Access the context using useContext hook
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
      Themed Button
    </button>
  );
}

Here's a breakdown:

- Context Creation: First, we create a context using React.createContext(). This establishes a new context object. Here, we're creating a ThemeContext to manage the theme of our application, with a default value of 'light'.

- Component Consumption: Inside a component (ThemedButton), we use the useContext hook to access the current value of the ThemeContext. This hook allows us to access the context directly without having to use a Consumer component or prop drilling.

- Rendering: Based on the current theme received from the context, the component renders a button with styles corresponding to the theme. If the theme is 'dark', the button's background will be black and text color white; otherwise, it will have a white background with black text.

The second set useReducer, useCallback, useMemo, and useRef introduces a more nuanced layer for those ready to explore the complexities of state management and optimization. These hooks offer sophisticated solutions for intricate state management, function optimization, memoization, and reference persistence.

useReducer: The useReducer hook is a state management hook in React that is used to manage complex state logic in a more organized and predictable way. It is an alternative to using useState, especially when the state transitions depend on the previous state or involve complex logic. Here's an explanation using a simple example:

import React, { useReducer } from 'react';

// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

// Component using useReducer
function Counter() {
  // Initialize state using useReducer
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );

Here's what happend up there:

- Reducer Function: We define a special function called a reducer (reducer). It's like a decision-maker that decides how our state changes based on different actions. Here, it checks the type of action received and updates the state accordingly. For example, if the action is 'increment', it adds 1 to the current count; if it's 'decrement', it subtracts 1.

- Component Initialization: Inside our component (Counter), we use the useReducer hook to manage our state. This hook takes two arguments: the reducer function and the initial state. It returns the current state (state) and a special function called dispatch, which we use to send actions to the reducer.

- Dispatching Actions: When we want to change the state, we call dispatch with an action object. This object tells the reducer what kind of change we want to make. For example, when the 'Increment' button is clicked, we dispatch an action of type 'increment', and the reducer increases the count.

- Rendering: We display the current count and provide buttons to increment and decrement it. When these buttons are clicked, they call dispatch with the corresponding action type, triggering the reducer to update the state accordingly.

In summary, useReducer is a tool in React that helps us manage complex state changes in a more organized way. It's like having a special assistant (the reducer) who knows exactly how to update our state based on different actions we give it. This hook is particularly useful when our state logic becomes more intricate or involves multiple actions.

5) useCallback: The useCallback hook is used in React to memoize functions, preventing unnecessary re-creation of functions during re-renders. This can be helpful for optimizing performance, especially in scenarios where child components receive function props. Consider the following example:

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

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

  // Function is memoized with useCallback
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;

  • useCallback is used to memoize functions.

  • It takes two arguments: the function and an array of dependencies.

  • The function is recreated only if the dependencies change or is triggered.

  • Useful for optimizing performance, especially when passing functions as props to child components.

In summary, the handleClick function is wrapped with useCallback. Now, the function is only recreated if its dependencies (specified in the dependency array, [count]) change. This helps in preventing unnecessary re-renders in child components when the parent component renders.

useMemo:
For useMemo, you can think of it similarly to useCallback, but instead of memoizing a function, it memoizes a value.
The useMemo hook in React is used to memoize the result of a computation, preventing unnecessary recalculations on every render. This way, the calculation is only performed again when the dependencies specified in the dependency array change. If the dependencies remain the same between renders, the memoized result is returned without recomputing, saving resources and improving the overall efficiency of your React components.

Take for example: using the useMemo hook to memoize the result of calculating the square of a number.

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

function SquareCalculator() {
  // State for input value
  const [number, setNumber] = useState('');

  // Memoized value for square calculation
  const square = useMemo(() => {
    return number * number;
  }, [number]); // Recalculate when number changes

  return (
    <div>
      {/* Input field to enter number */}
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
        placeholder="Enter a number"
      />
      {/* Display the square result */}
      <p>Square: {square}</p>
    </div>
  );
}

  • We have a state variable number to hold the input number.

  • We use the useMemo hook to memoize the square calculation based on the input number. The memoized value (square) will be recalculated only when the input number changes.

  • Inside useMemo, we define the function to calculate the square simply as number * number.

  • The dependency array [number] specifies that the memoized value should be recalculated whenever the input number changes.

  • Finally, we render an input field for users to enter a number and display the calculated square here <p>Square: {square}</p>.

useRef:
The useRef hook in React is used to create a mutable object called a ref object. It's commonly used for accessing and interacting with a DOM element or for persisting values across renders without causing re-renders.

import React, { useRef } from 'react';

function ToggleButton() {
  // Create a ref to store the boolean value
  const isToggledRef = useRef(false);

  // Function to toggle the boolean value
  const toggleValue = () => {
    isToggledRef.current = !isToggledRef.current;
    console.log('Value toggled:', isToggledRef.current);
  };

  return (
    <div>
      {/* Button to toggle the boolean value */}
      <button onClick={toggleValue}>Toggle Value</button>
    </div>
  );
}

- Creating a Ref:
We use the useRefhook to create a reference (isToggledRef) and initialize it with the boolean value false. This reference will be used to store and manipulate the boolean value.

- Toggling the Value:
We define a function toggleValuethat toggles the boolean value stored in the ref (isToggledRef). When called, it flips the boolean value from true to false or vice versa, and then logs the updated value to the console.

- Using the Ref:
Since we're not interacting with any DOM elements directly in this example, we only need to create and use the ref. There's no need to attach it to any specific element.

In summary, useRef allows us to create mutable references to values that persist across renders. In this example, we use useRef to store and manipulate a boolean value, demonstrating how it can be used to maintain stateful values in functional components.

CONCLUSION

In summary, React hooks have revolutionized how developers build React applications. Whether it's simplifying state management with useState, handling side effects efficiently using useEffect, streamlining context management with useContext, managing complex state transitions via useReducer, or creating custom hooks to encapsulate reusable logic, hooks offer a versatile and intuitive way to enhance React development. By embracing hooks like useCallback, useMemo, and useRef, developers can unlock the full potential of functional and declarative programming, leading to cleaner, more maintainable code. So, harness the power of React hooks and elevate your development experience to new heights.

Also, while this article offers a beginner-friendly introduction to React hooks, there's a vast world of possibilities waiting to be explored. I encourage you to delve deeper into each hook, experiment with their capabilities, and discover new ways to enhance your React projects. This overview is just the tip of the iceberg – so keep learning, keep exploring, and unlock the full potential of React hooks in your development journey!

Happy coding, and see you in the next article! ❤️

Save changes

Web DevelopmentReactPythonbeginner