Hooks
59 bites tagged Hooks — interview questions with model answers, and 60-second explainers.
React Refs: Memory Without Re-renders
A React ref is like a secret pocket for your component to remember information without triggering re-renders. Use it to hold values not needed for rendering, like a timer ID. The footgun: changing a ref's value won't update the UI; use state for that.
useEffect: Syncing React with the Outside World
useEffect synchronizes your component with systems outside React's control, acting as a bridge to the browser or network. It's for data fetching or subscriptions.
useState: Giving Components Memory
useState gives a component its own memory, letting it track information that changes over time. It's used for everything from handling form input to toggling UI. The biggest footgun: state updates are asynchronous and only apply on the next render.
useSyncExternalStore: For Synchronous External State
`useSyncExternalStore` lets React safely read from external data sources without UI tearing. It's for integrating non-React state, like from Redux or browser APIs, ensuring consistent reads during concurrent rendering.
useAnimatedStyle: Link Shared Values to Component Styles
The `useAnimatedStyle` hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
useSharedValue: State for High-Performance Animations
The `useSharedValue` hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with `useAnimatedStyle` to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
Testing Custom Hooks with `renderHook`
`renderHook` isolates a hook for testing by running it inside a tiny, dedicated component. Use it to verify a hook's logic and side effects without rendering a full UI. Footgun: Forgetting to wrap state updates in `act()` can cause flaky, unpredictable tests.
React's useMemo Hook: Cache Expensive Calculations
useMemo is React's cache for expensive calculations, preventing re-computation on every render. Use it for heavy tasks like filtering large lists. The main footgun is an incomplete dependency array, which leads to stale, cached data.
useCallback: Cache Functions Between Renders
useCallback caches a function so it's not recreated on every render. This is crucial for performance when passing callbacks as props to memoized components, preventing them from re-rendering unnecessarily.
useReducer: Manage Complex State with Predictable Actions
useReducer centralizes complex state logic. Instead of setting state directly, you "dispatch" actions describing what happened. It's ideal for state with many sub-values or when the next state depends on the previous one.
Escape Prop Drilling with React Navigation Hooks
React Navigation hooks let components control navigation without prop drilling. `useNavigation` gives you the `navigation` object to change screens, while `useRoute` provides data about the current screen. The footgun: they only work inside a navigator.
Get Hooks bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.