Add a Lifecycle Event with the useEffect Hook to a React Function Component
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.
navigator.getBattery() is deprecated.
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.
I was trying in safari and didn’t see that chrome still supports. Will try again. Thanks!
Nice material Elijah. Though you need to update CodeSandox examples as they are now not working.
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", "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",Victor, glad you figured that out. All the deps have been updated to the latest now that they are no longer pre-released.
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!