React Hooks in Action: In-depth Analysis from useState to useContext

In-depth analysis of useState and useContext

React Hooks completely changed the state management and function reuse of React components, allowing function components to have the functions of class components.

useState: State management of function components

Introduction:

useState is the most basic Hook in React, which allows us to add state to function components. useState is a built-in Hook provided by React for adding local state to function components. It accepts an initial value as a parameter and returns an array. The first element of the array is the current state, and the second element is a function that updates the state.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The setCount function returned by useState is used to update the state. Each time setCount is called, React re-renders the component and regenerates the virtual DOM based on the new state value, then performs efficient DOM diff and finally updates the actual DOM.

In-depth understanding of

How useState works, the asynchronicity of state updates and their impact on performance.

• State updates are asynchronous, which means that if setCount is called multiple times in the same event loop, React will only use the last value.

• useState does not support shallow comparison of complex objects. If you need to update the state based on the previous state, you can use the function form of setCount, such as setCount(prevCount => prevCount + 1).

Advanced Application

Combined with useEffect to handle side effects, such as data acquisition and cleanup.

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

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default Example;

Code example interpretation: First, we use useState to create three state variables: data stores the acquired data, loading indicates whether the data is loading, and error stores any possible error information.

Then, we define a fetchData function for asynchronous data acquisition. This function contains error handling and state update logic.

Next, we use useEffect to perform data acquisition. The second parameter of useEffect is a dependency array. Passing an empty array here means that it is only executed once after the component is mounted, that is, the data is acquired when it is first rendered. This ensures that the data is acquired when the component is loaded, rather than re-acquired every time the state is updated.

In the callback function of useEffect, we call the fetchData function. Since fetchData changes the values ​​of data, loading, and error, there is no need to add these state variables to the dependency array, because their changes will trigger the re-rendering of the component, thereby automatically performing new data acquisition.

useContext: A contextual solution for shared state

Introduction

useContext is used to pass data across components without explicitly passing props.

First, we need to create a Context:

import React from 'react';

const ThemeContext = React.createContext('light');

然后在组件中使用 useContext：

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

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

  return (
    <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
      {theme === 'dark' ? 'Dark' : 'Light'}
    </button>
  );
}

In-depth understanding

• Components using useContext will re-render when the provider is updated, even if the other states of the component have not changed.
• If multiple components subscribe to the same Context, they will all re-render when the provider state changes, which may cause unnecessary performance overhead. This can be optimized through strategies such as React.memo or shouldComponentUpdate.
• To prevent abuse, only use Context when you need to share state across multiple levels, otherwise props should be given priority.

Combined application of useState and useContext

Combining useState and useContext, we can create a counter application with theme switching function:

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

// Creating a ThemeContext
const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      {children}
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
}

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

  return (
    <div style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me ({theme})
      </button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <Counter />
    </ThemeProvider>
  );
}

export default App;

Code example explanation: ThemeProvider uses useState to manage the theme state, and the Counter component subscribes to the theme through useContext and uses useState to manage the counter state. When the theme is switched, Counter will be re-rendered to display the color of the corresponding theme.