# 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.

```jsx
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.

```jsx
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:

```js
import React from 'react';

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

Then use `useContext` in your component:

```jsx
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:

```jsx
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.

---

%[https://patreon.com/tianyaschool/collections]