useEffect.dev

React Hooks are hard awesome!

Master the best invention since React itself, and take your React experience to the next level. 🚀

Start the first lesson right now! 👇

useEffect.dev

Lesson 1. Store a local state with useState 1. Creating and updating a local state

Let’s consider this component, containing a text input. Here we want to keep, as a local state, the value entered in the input and display it below the input:

Result
  1. useState takes as a parameter the initial value of your state and returns an array with two elements: the current value of the state and a function to set the state's new value.
  2. To get the state's current value, use the first value returned by useState, here name.
  3. To update the state's value, call the function returned as second value by useState, here setName, with, as a parameter, the new value.

Updating the state

When a component defines a local state, the only way to update it is to use the setter returned as the second element by the call to useState.

This means that the following snippets are incorrect:

const [value, setValue] = useState(0)
value = 1
const [object, setObject] = useState({ key: 'aaa', value: 1 })
object.value = 1
const [array, setArray] = useState([1, 2, 3])
array.push(4)

If you incorrectly update the state, you won’t get any error, but some weird behaviors will happen. For instance, the component will not re-render, and you will not see your updates in the browser.

This is why it can be very useful to be used to the spread syntax to create new arrays and objects from existing ones:

setValue(1)
setObject({ ...object, value: 1 })
setArray([...array, 4])

Exercise

Can you update this component so when the user clicks the button:

  • it adds the value of the input to the list, and
  • it clears the input?
Result
Click here to see the solution!

To update the tasks state, we can use the spread operator (...) to create a new array from the existing one tasks, and call setTasks with this new array:

<button
onClick={() => {
setTasks([...tasks, newTask])
setNewTask('')
}}
>
Add
</button>
Liked this lesson?Continue learning

A complete course to help you become fluent with hooks.

  • 1
    Understand how hooks workWith several interactive examples.
  • 2
    Master common patternsDebouncing, contexts, reducers…
  • 3
    Solve recurring problemsAsynchronous effects, infinite loops…
  • 4
    Use hooks at their full potentialAnd create your own custom hooks!

Want to learn React first?

To start on the right track and discover React,check out the React Workshop I created.

Why a course dedicated to hooks?

You can find a lot of excellent React courses on theInternet. But when you know React already and wantto deep dive into hooks, all you have left is officialdocumentation, tutorials, and blog posts.

This course will show you concrete use cases and teachyou how to solve common problems that hooks can cause,so you can take your React components to the next level,help your teammates, or even get your dream job.

They liked the course…

Included: the course content as a PDF

Do you prefer books over online courses? You don’t have to choose anymore!

The PDF eBook is included in the Premium plan.You can also purchase it alone.

One payment for lifetime access.

Course only
$29 US
  • 14 detailed lessons
  • Interactive examples & exercises
  • Access to all future updates
  • 30-day money-back guarantee
Most popular
Premium
$39 US
  • 14 detailed lessons
  • Interactive examples & exercises
  • Access to all future updates
  • 30-day money-back guarantee
  • + the course content as a PDF eBook
Team
Contact us
  • For your whole team
  • Premium support
  • 30-day money-back guarantee
  • Let’s discuss your needs

Do you offer mentoring sessions to help me with React?

Yes, I can guide you in your learning journey with mentoring sessions.

Check out my mentoring services!

Does it cover JavaScript or TypeScript?

This course presents hooks with JavaScript because youdon’t need TypeScript to use them, so I preferred making itaccessible to developers who don’t use TypeScript.

But being a TypeScript-lover, I know it brings someadvantages, and you’ll find in the course a lesson dedicatedto improving your usage of hooks using TypeScript.

What will I find in the course?

The course contains 14 lessons, each divided into small sub-lessons, from the basics to solving tricky problems.

Here is the course’s table of contents:

  • 1. Store a local state with useState
  • 2. Trigger side effects with useEffect
  • 3. Custom hooks and classic async pattern
  • 4. What are hooks anyway?
  • 5. Debugging hooks
  • 6. Get the current state when dealing with async code
  • 7. Solving infinite loops when using useEffect
  • 8. Optimizing performance with useMemo and useCallback
  • 9. Debouncing a user input
  • 10. Using contexts to share values between components
  • 11. Simplify state update logic with reducers
  • 12. Custom hooks to use the browser’s APIs
  • 13. From render-props and high-order components to hooks
  • 14. Better hooks with TypeScript

Hi! I’m Sebastien Castiel 👋

I’m a French developer expatriated in Montreal.

I have used React for several years now and hooks for the last two years on several projects.

What if I don’t like what I bought?

If you are not satisfied with the course, I offer you a 30-day money-back guarantee, no question asked.

Just shoot me an email at sebastien@castiel.me.