Reusable State and Effects with React Hooks

13 Oct 2018

Today my latest course has launched entitled, Reusable State and Effects with React Hooks.

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 (currently pre-released), 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.

🆓 The Reusable State and Effects with React Hooks course is currently free to watch until Sunday December 16th. So, watch today!

Course Introduction

In the following video (click the video to play) I introduce the course and explain what you can expect by watching the 12 lessons. The lessons are faced paced and the whole course lasts about an hour long. You could probably watch the entirety of the course over lunch or maybe convince your boss to watch it during work time.


The following 12 lessons are included in the React Hooks course.

  • 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


I hope you enjoy the course and find something useful that you can start using in your projects. Remember, you can watch the whole course free for a week!

Originally published at