React Hooks in action: from useState to useContext depth analysis

 In-depth analysis of useState and useContext.

React Hooks revolutionizes state management and feature reuse for React components, allowing function components to have the functionality of class components.

 useState: state management for function components

useState is the most basic Hook in React that 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 where 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() {
  const [count, setCount] = useState(0);

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

useState The returned setCount function 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 values, then performs an efficient DOM diff to finally update the actual DOM.

 deep understanding

useState work, the asynchronous nature of state updates and their impact on performance.

• 
  State updates are asynchronous, which means that by calling setCount multiple times in the same event loop, React will only use the value from the last time.
• 
  useState Shallow comparisons of complex objects are not supported, if you need to update the state based on the previous state, you can use a function in the form of setCount , e.g. setCount(prevCount => prevCount + 1) .

 advanced application

Combine useEffect to handle side effects such as data acquisition and cleaning.

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

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

  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(() => {
    fetchData();
  }, []);


  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 use useState to create three state variables: data to store the data obtained, loading indicates whether the data is loading, error to store any possible error messages.

We then define a fetchData function to fetch the data asynchronously. This function contains error handling and state update logic.

Next, we use useEffect to perform data fetching. useEffect The second parameter of is an array of dependencies, and passing in an empty array here means that it will only be executed once after the component has been mounted, i.e., when it is first rendered to fetch the data. This ensures that the data is fetched when the component is loaded, rather than re-fetching it on every state update.

In the useEffect callback function, 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, as their changes trigger a re-rendering of the component, which automatically performs a new data fetch.

 useContext: context solution for shared state

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');

 Then use useContext in the component:

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>
  );
}

 deep understanding

• 
  Components that use useContext are re-rendered when the Provider is updated, even if the rest of the component’s state remains unchanged.
• 
  If multiple components subscribe to the same Context , they will all re-render when the provider state changes, potentially leading to unnecessary performance overhead. This can be optimized by a policy such as React.memo or shouldComponentUpdate .
• 
  To prevent abuse, use Context only when state needs to be shared across multiple tiers, otherwise props delivery should be prioritized.

Combined application of useState and useContext

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

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

// Created 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 theme state, Counter component subscribes to the theme via useContext and also uses useState to manage counter state. When the theme is switched, Counter will re-render to show the color of the corresponding theme.