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 id="Data-Retrieved-Successfully">Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}