How do Hooks work in React Native and when should you use them?

24 Haz 00:23

useState is essentially just a wrapper around an internal array slot that returns a new value on every render. The hook stores the state in what’s called a “Fiber”—a data structure that React Native maintains per component instance. When you call setState, the current Fiber object is marked, and a new render tree is generated during the next commit phase—just like with class-based setState, except you don’t need to worry about this binding. useEffect works similarly: React keeps a list of effect entries for each component instance. After rendering, the layout-phase queue is processed, and the callback only runs once the UI is mounted. The cleanup return function lets you release resources like event listeners or timers, which is especially important in mobile apps to avoid memory leaks. The big advantage over class components is the clear separation of logic—you can combine multiple useState or useEffect calls without building a deep inheritance hierarchy. You also save boilerplate like constructors and componentDidMount/componentWillUnmount. A common pitfall, though, is incorrectly setting dependencies in useEffect’s dependency array: if you forget something there, a network call or listener might stay active, draining the battery unnecessarily. Async operations should always be guarded with a cancel flag or AbortController, because React keeps rendering even if the promise resolves later. In my last app, I wrapped all fetch calls in a useEffect and returned the abort signal in the cleanup—this completely eliminated the “ghost request” problem. Overall, I recommend using hooks for new features and falling back to class components only when you have very complex lifecycle logic that can’t be cleanly split into multiple effects.