React 2020
23 January, 2020
The future of React in 2020.
In this workshop we will learn two things:
Here are some examples of what we will learn:
Suspense
// suspense
export default function App() {
return (
<div className="App">
<React.SuspenseList revealOrder="backwards">
<React.Suspense fallback={<Loading />}>
<Rick />
</React.Suspense>
<React.Suspense fallback={<Loading />}>
<Morty />
</React.Suspense>
<React.Suspense fallback={<Loading />}>
<Summer />
</React.Suspense>
</React.SuspenseList>
</div>
)
}
Custom hooks
// custom hook
export function useInput(initialValue) {
const [value, setValue] = useState(initialValue)
const handleInput = e => {
setValue(e.target.value)
}
return {
value,
onChange: handleInput
}
}