useEffect 내부에 정의된 함수 vs 외부에 정의된 함수

[ghdtjgus76]

책에서는 useEffect 훅 내부에서만 사용하는 함수라면 내부에서 선언해서 사용하는 것이 좋다고 했습니다.
그런데 정확히 어떤 차이가 있는지 알고 싶어서 discussion을 열게 되었습니다.

내부에 정의된 함수

useEffect 내부에 함수를 정의하는 경우, useEffect가 실행될 때마다 새로 함수가 생성됩니다.
이렇게 훅 내부에서 함수를 정의하면 해당 함수는 useEffect가 실행될 때마다 생성되고 사라지게 됩니다.

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

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    function doSomething() {
      console.log(`Count is ${count}`);
    }

    doSomething();
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    const complexFunction = () => {
      console.log(`Count is ${count}, Name is ${name}, Toggle is ${toggle}, Prop is ${someProp}`);
      if (toggle) {
        console.log('Toggle is true');
      }
    };

    complexFunction();
  }, [count, name, toggle, someProp]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setName(name === 'John' ? 'Doe' : 'John')}>Toggle Name</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

export default MyComponent;

useEffect 외부에 정의된 함수

아래와 같이 useEffect 외부에 함수를 정의해서 사용하게 되면, 컴포넌트가 리렌더링될 때마다 매번 함수가 새로 생성됩니다.

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

function MyComponent() {
  const [count, setCount] = useState(0);

  const doSomething = () => {
    console.log(`Count is ${count}`);
  };

  useEffect(() => {
    doSomething();
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

불필요한 함수 재정의를 방지하고 함수의 스코프를 최소화시키기 위해서 훅 내부에 함수를 선언합니다.
만약, useEffect 외부에 함수를 정의하되 불필요한 재생성을 막고 싶다면 useCallback 훅으로 함수를 감싸줘야 합니다.

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

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');
  const [toggle, setToggle] = useState(false);

  const complexFunction = useCallback(() => {
    console.log(`Count is ${count}, Name is ${name}, Toggle is ${toggle}, Prop is ${someProp}`);
    if (toggle) {
      console.log('Toggle is true');
    }
  }, [count, name, toggle, someProp]);

  useEffect(() => {
    complexFunction();
  }, [complexFunction]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setName(name === 'John' ? 'Doe' : 'John')}>Toggle Name</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

export default MyComponent;

함수가 외부에서 참조되거나 자식 컴포넌트에 전달되는 경우, 그리고 복잡한 로직을 분리해서 관리하는 경우에는 useCallback으로 감싼 외부 함수가 조금 더 낫고, 간단한 로직, useEffect가 자주 실행되지 않는 경우에는 내부 함수가 적합하다고 합니다.

참고 자료

https://www.inflearn.com/questions/1014306/useeffect-%EC%95%88%EC%97%90-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%A0%95%EC%9D%98%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94