Reusable State and Effects with React Hooks
Offered By: egghead.io
Course Description
Overview
Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal, you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.
As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.
By the end of this course, you'll learn how to:
Run (and Skip) side-effects with the useEffect hook
Write a custom hook to share logic in your app
Simplify the Context API with the useContext hook
Update state with dispatch actions using the useReducer hook
Optimize Components with useMemo
As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.
By the end of this course, you'll learn how to:
Run (and Skip) side-effects with the useEffect hook
Write a custom hook to share logic in your app
Simplify the Context API with the useContext hook
Update state with dispatch actions using the useReducer hook
Optimize Components with useMemo
Syllabus
- Introduction to Reusable State and Effects with React Hooks
- Environment Setup for React Hooks
- Add State with the useState Hook to a React Function Component
- Add Linting to Help Enforce Rules when Using React Hooks
- Add a Lifecycle Event with the useEffect Hook to a React Function Component
- Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable
- Write Custom Hooks to Share Logic Between React Function Components
- Leverage an Existing Community Hook in Your React Function Component
- Use the useReducer Hook and Dispatch Actions to Update State
- Use the useContext Hook to Wire-up the React Context API
- Simulate PureComponent with a React Function Component
- Leverage the React useMemo Hook for Expensive Operations
- Convert a Render Props Component using a Custom React Hook
Taught by
Elijah Manor
Related Courses
Introduction to ReactJSMicrosoft via edX Front-End Web Development with React
The Hong Kong University of Science and Technology via Coursera Multiplatform Mobile App Development with React Native
The Hong Kong University of Science and Technology via Coursera Client-based Web Applications development: ReactJS & Angular
Universidad Politécnica de Madrid via MirÃadax React
Udacity