왜 리액트 훅 선언은 특정 규칙이 있을까?

Why declare hooks at the top level?

Ensures Consistent Behavior

• 리액트는 여러가지 hooks가 있다. 그 중 대표적으로 UseEffect, UseState , UseCallback 등의 hooks가 있는데, 이러한 훅들은 순차적인 order로 선언되어야 하며 이러한 order로 부터 리액트는 render 시에 어떠한 순서에서 어떠한 훅을 호출해야 하는지 파악 할 수 가 있다.
  • Ref: https://legacy.reactjs.org/docs/hooks-rules.html#explanation

Improve Readability and Maintainability

• top에 hook들(useEffect, useState, useMemo 등)을 선언 함으로써, 보다 쉽게 파악할 수 있기에 유지보수가 용이해진다.

Prevents Memory Leaks and Bugs

• hook을 조건문에서 설정한다거나, loop에 설정할 수 있다면 이는 memory leak이나 사이드 이펙트를 발생시킬 가능성이 커진다. 따라서, hook을 선언할 수 있는 특정 rule 들안에서 제한적으로 hook을 작성함으로써 memory leak 이나 사이드 이펙트를 최소화 시킬 수 있다