Decoupling from the State Layer
Custom Hooks to the Rescue!
My name is Iago.
What are hooks?
A feature provided by libraries for isolating, reusing and composing stateful logic.
A concept independently of library...
...that allows us to handle stateful logic, detached from the view.
What about custom hooks?
A new hook, being composed by thirdy party hooks or other custom hooks.
Why should I care? 🤔
...is the degree of interdependence between software modules.
- Dependent of each other
- No clearer data flow
- Harder to read, refactor and test
- Can be used separately
- Clearer separation of responsibilities
- Much easier to understand
Coupling in UI libraries...
- Handles presentation
- Semantics (HTML)
- Styling (CSS)
- Handles behavior
- Stateful logic
- Async calls
Decoupled View and State
- Better composability and reusability
- Clearer separation of concerns
- Good testability
Custom Hooks to the Rescue
1. The Rules
A. Custom hooks should obey every other rules dictated by the library you are using.
B. Custom hooks should not leak or reveal the technology being used underneath.
C. Custom hooks should not expose the shape of the state being stored.
D. A custom hook should not cover too much state.
2. The line between view and state
3. Custom Hook's Public Interface
4. Implementing it Internally
useSelector and useDispatch
Context API: Provider
How to Test Components using Custom Hooks
Wrapping it up
- What are custom hooks
- Why we should care about decoupling the state from the view
- How to implement with different strategies
- How to test it