Hooks enable state in functional components and are implemented as a linked list, which explains why they must be called in the same order on every render.
Focus on writing clear, future-proof code instead of worrying about minor performance overhead from hooks, as these are rarely the actual application bottleneck.
Improve readability and performance by defining constants and pure helper functions outside the component scope, avoiding unnecessary re-creation on each render.
Always declare direct dependencies in hooks like useEffect and useCallback to prevent subtle bugs when the code is modified later.
Create meaningful intermediate variables from props or state to represent business logic, making the code more readable and hook dependencies more precise.
Store values that persist across renders but don't affect the UI, like pagination counters, in a useRef to avoid unnecessary component re-renders.
Use the functional update form of setState to compute new state from the previous state, which removes the state variable from dependency arrays and prevents unnecessary re-creations of callbacks.
If a piece of state is calculated from props within a useEffect, it is derived state and should be computed directly during the render to avoid an extra re-render cycle.
Encapsulate and share repeated component logic, such as handling an Android back button, by creating custom hooks for better maintainability and readability.
23:39Marc Brehmer
28:10Adam Klein
49:32Keith Cirkle
21:09Daniel Espino Garcia
28:43Michał Moroz
25:22Aurora Scharff
30:40André Kovac
28:36Daniel Kelly
Jobs that call for the skills explored in this talk.
Nia Health GmbH
Berlin, Germany
Schulz.codes GmbH
Darmstadt, Germany
doinstruct Software GmbH
Berlin, Germany
Optimi Solutions GmbH