Mid level: Lifecycle Methods and Hooks in React

PHPz

Release： 2024-07-18 10:56:28

Original

1014 people have browsed it

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

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

export default Counter;

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

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

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

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

import React, { useContext } from 'react';

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

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

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

export default Counter;

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

In this example, useFetch is a custom hook that fetches data from a given URL.

Advanced Hook Patterns

Managing Complex State with useReducer

When dealing with complex state logic involving multiple sub-values or when the next state depends on the previous one, useReducer can be more appropriate than useState.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

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

export default Counter;

In this example, useReducer manages the count state with a reducer function.

Optimizing Performance with useMemo and useCallback

useMemo

useMemo is a hook that memoizes a computed value, recomputing it only when one of the dependencies changes. It helps optimize performance by preventing expensive calculations on every render.

Example:

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

const ExpensiveCalculation = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    return n <= 1 ? 1 : n * computeFactorial(n - 1);
  };

  const factorial = useMemo(() => computeFactorial(number), [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

const App = () => {
  const [number, setNumber] = useState(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <ExpensiveCalculation number={number} />
    </div>
  );
};

export default App;

In this example, useMemo ensures that the factorial calculation is only recomputed when number changes.

useCallback

useCallback is a hook that memoizes a function, preventing its recreation on every render unless one of its dependencies changes. It is useful for passing stable functions to child components that rely on reference equality.

Example:

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

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <Button onClick={increment}>Increment</Button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

In this example, useCallback ensures that the increment function is only recreated if its dependencies change, preventing unnecessary re-renders of the Button component.

Conclusion

Mastering React Hooks and lifecycle methods is essential for building robust and maintainable applications. By understanding and utilizing hooks like useState, useEffect, useContext, and useReducer, as well as advanced patterns like custom hooks and performance optimizations with useMemo and useCallback, you can create efficient and scalable React applications. As a mid-level developer, these skills will significantly enhance your ability to develop and maintain high-quality React applications, making you an invaluable asset to your team.

The above is the detailed content of Mid level: Lifecycle Methods and Hooks in React. For more information, please follow other related articles on the PHP Chinese website!