[React 문서] useState - 초기 상태값 재생성 방지

React는 초기 상태값을 저장하고 이후 렌더링에서는 이를 무시합니다.

// useState 초기 상태값 예시
function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

올바른 예

아래 두 코드는 초기 렌더링 때 createTodos 함수가 한번만 실행됩니다.

• 초기화 함수를 전달

const [todos, setTodos] = useState(createTodos);

혹은

const [todos, setTodos] = useState(() => createTodos());

잘못된 예

하지만 아래와 같이 초기 상태값을 설정(A)하면 text 상태값이 변경되는 경우와 같이 리렌더링이 발생할 때 React는 createInitialTodos 를 매번 호출하는 비효율이 발생합니다.

• 초기값을 직접 전달함

function createInitialTodos() {
  console.log("large arrays or performing expensive calculations");
  const initialTodos = [];
  for (let i = 0; i < 50; i++) {
    initialTodos.push({
      id: i,
      text: "Item " + (i + 1),
    });
  }
  return initialTodos;
}

export default function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos()); // A
  const [text, setText] = useState(""); // B

[참조]

React 공식 개발 문서