Add a Lifecycle Event with the useEffect Hook to a React Function Component

React

Share this video with your friends

React has provided the useEffect Hook to add side-effects to a Function Component. In this lesson, we'll add hooks to manage localStorage and listen to window keydown events. We’ll also unpack how to clean-up after these effects and also control how often they are executed.

Jason

~ 6 years ago

navigator.getBattery() is deprecated.

Elijah Manor(instructor)

~ 6 years ago

Yep, I mention that at the beginning of the lesson. You can find it listed in the transcript too.

We'll start our React dev server and kick up a small React app that uses the deprecated but still present battery status API in Chrome, in order to visually show the percentage of battery left on a machine.

It was a fun demo for me to show off the basics of useEffect. From there, I move to another example that doesn't rely on a deprecated feature.

Jason

~ 6 years ago

I was trying in safari and didn’t see that chrome still supports. Will try again. Thanks!

Viktor Soroka

~ 6 years ago

Nice material Elijah. Though you need to update CodeSandox examples as they are now not working.

Viktor Soroka

~ 6 years ago

I got the reason. In order to fix that the versions should be fixed.

    "react": "^16.7.0-alpha.0", -> "react": "16.7.0-alpha.0"
    "react-dom": "^16.7.0-alpha.0", - "react-dom": "^16.7.0-alpha.0",

Viktor Soroka

~ 6 years ago

    "react": "^16.7.0-alpha.0", -> "react": "16.7.0-alpha.0"
    "react-dom": "^16.7.0-alpha.0", - "react-dom": "16.7.0-alpha.0",

Elijah Manor(instructor)

~ 6 years ago

Victor, glad you figured that out. All the deps have been updated to the latest now that they are no longer pre-released.

Leo Nistor

~ 5 years ago

Great course! Is it possible to allow questions marks in the todo.text, i.e. showAbout only when the NewTodo input is not focused? Maybe useRef? Thank you!