Before you get started it is highly encouraged that you do some light skimming of the official React hooks documentation Introducing Hooks – React. The workshop will provide exercises to get hands-on experience with hooks. Getting explaining as to how hooks works is up to you to Google.
(let’s be real, any explanation would simple be copy-pasted anyways. Better keep the wall of text as slim as possible)
This exercise serves as a simple introduction to getting familiar with the useState
hook.
Take a look at the component OneTimeButtonTask/oneTimeButton.jsx
. It does on simple thing: once it has been clicked it will disable itself. While the logic is simple, it is tightly coupled to the component itself.
Task 1: Rewrite the component to use useState
instead of using old-school React state.
Task 2: Abstract your implementation in task 1 so that the logic can be reused wherever you want to “allow action X only once”.
Now we will convert a basic todo application to use hooks instead of state. Familiarize yourself with the existing code in TodoTask
. Both index.js
and TodoForm.jsx
uses state: index.js
for managing the list of added todos, and TodoForm.jsx
for managing form input.
Task 1: Extract all logic in TodoForm.jsx
into useInputState.js
.
Task 2: Extract all logic in index.js
into useTodoState.js
Now that we have converted the todo app to use useState
let’s take advantage of it.
Task 3: Create a new type of form for inputting todos. What it does is up to you. The important thing is to reuse useInputState.js
. As an example, you could implement ReversedTodoForm.jsx
that will reverse the input before adding it to the list of todos. 🤷♂️
In this exercise the task is to rewrite existing functionality that uses render props, to instead use hooks, and observe how much slimmer the code becomes.
For this task we will implement a component that fetches important football players name, based on their shirt number, from an api and displays the name of the player in the browser. What’s new in this exercise is that we will in addition to useState
also use useEffect
and useContext
The existing code uses render props to do two things:
UserProfileProvider
takes an id and will fetch it from the api and the provide the user as a render prop to its childrenThemeProvider
that can be consumed to provide the current theme as a render prop As can be seen inUserProfile.jsx
this causes a couple of levels of nesting.
Task 1: Follow the comments in the code to rewrite this render prop functionality as hooks.
If you have managed the tasks above it seems to work all right. However there is on scenario that will cause an error
- Begin to type in search field, so that it currently loading.
- Then, before it finishes loading, delete the input value.
- When there is no input value
UserProfile
unmounts.
That causes the following error:
Can't perform a React state update on an unmounted component.
Task 2: Solve the problem!
Well… There are no more laid out exercises. But if you want to spend more of your village time to learn about React hooks, there is plenty more you can do with hooks
Suggestions:
- Explore
useMemo
anduseCallback
to memoize values based on props - See if you can rewrite your redux application with the hook
useReducer
and avoid all the redux boilerplate code you have previously committed to 🤓
A Simple Intro to React Hooks (inspiration for exercise 1)
How to Build a Todo List with React Hooks (inspiration for exercise 2)
Refactoring a component to use React hooks (inspiration for exercise 3)