React Hooks
Experience Report, 2 Months In
Hooks in one sentence?
Quick Hooks Primer
- A new API exposed by React, as a number of named exports (currently 10)
import React, { useState } from "react";
- All hooks are plain, side-effectful functions following the use* naming convention, with varying arguments and return values
function Example() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}
- Introduced in October 2018, still "experimental"
- Expected to hit a stable release next month
- Already used at Facebook for a while, significant API changes very unlikely
- You can only call a hook function during a functional React component render call
- You always need to call hooks in the same order, never conditionally or in a loop
- You can extract parts of code that uses hooks to an external function and call it from a component - a pattern called "custom hooks"
- No new features, just an alternative interface to existing ones
- Alternative to class components and HOC/render props
- More ergonomic and composable API for stateful code reuse
- Backwards compatible i.e. all existing code using classes will continue to work
Let's build something with hooks!
Hooks are experimental
But yeah, it was hard to resist, so...
Learnings after
2 months with hooks
on several projects
The API surface of
React I use actually
got smaller
Hooks feel native in React world
Built-in hooks and Custom hooks
Built-in components and User defined components
Hooks help making right decisions about state location
Hooks encourage playing with code
Fetching data with hooks is a bit awkward
(for a good reason)
You will forget to add a dependecy to an
effect hook
(but you will learn to check it)
useReducer and don't useState when state gets bigger
(actually useState is just a special case of useReducer)
Maciek Pekala
@penzington
Hooks - Experience Report
By pekala
