useEffect 후크 설명

Patricia Arquette
풀어 주다: 2024-09-28 18:16:02
원래의
809명이 탐색했습니다.

useEffect Hook Explained

The useEffect hook is a fundamental part of React, allowing you to perform side effects in functional components. Here’s a detailed breakdown:

What is useEffect?

  • The useEffect hook lets you perform side effects in your components, such as data fetching, subscriptions, or manually changing the DOM.
  • It can be considered a combination of the lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount.

Syntax

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);
로그인 후 복사

Parameters

  1. Effect Function: The first argument is a function that contains the side effect code. This function will run after the render is committed to the screen.

  2. Cleanup Function (optional): The effect function can return a cleanup function that React will call when the component unmounts or before the effect runs again. This is useful for cleaning up subscriptions or timers.

  3. Dependencies Array: The second argument is an array of dependencies. The effect runs only when one of the dependencies changes. If you pass an empty array ([]), the effect runs only once after the initial render (like componentDidMount).

Usage Examples

  1. Basic Example: Fetching data on mount
import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
로그인 후 복사
  1. Cleanup Example: Subscribing to an event
import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return <div>Resize the window and check the console.</div>;
};
로그인 후 복사
  1. Dependency Example: Running an effect based on a prop change
import React, { useEffect, useState } from 'react';

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return <div>Count: {count}</div>;
};
로그인 후 복사

Best Practices

  • Specify Dependencies: Always include the variables that your effect depends on in the dependencies array to avoid stale closures.
  • Avoid Side Effects in Rendering: Keep side effects out of the render phase; use useEffect instead.
  • Use Cleanup Functions: If your effect creates subscriptions or timers, always return a cleanup function to avoid memory leaks.

Conclusion

The useEffect hook is a powerful tool for handling side effects in functional components, making it essential for modern React development. By understanding its syntax and best practices, you can effectively manage component behavior and side effects.

위 내용은 useEffect 후크 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿