React Hooks and Context (with React-Redux migration guide)

Learn the future of React and how to migrate your existing Redux code

Created byMohammad Iqbal

Last updated 6/2019

English

English [Auto],

What you'll learn

React Hooks at a Deep Level
Use React hooks with existing Redux code
useState, useEffect, useReducer, useContext
Global state with Context api
Mimic Redux functionality with just Hooks
Redux migration guide to React Hooks
working with forms and React hooks

Course content

2 sections • 23 lectures • 50m total length

React Hooks Intro0:34
Discover React hooks that let functional components read and update state by hooking class functionality. Learn how hooks simplify development, boost performance, and guide migration toward hooks alongside Redux.
2 rules off using hooks0:31
Identify the two rules of using hooks: keep hooks at the top level to avoid nesting, and never call hooks outside of a function, including the use effect hook.
4 Hooks Overview1:24
This lecture offers a basic overview of four main hooks—useState, useEffect, useContext, and useReducer—and their roles in local versus global state via context.
useState() overview2:58
Discover how useState initializes local state in functional components, returning [state, setState], with separate setters for each property, avoiding this and props, and optional additional state via another useState call.
useEffect() overview1:07
Explore the useEffect hook and its three usage patterns: no second argument, empty array (mount, like componentDidMount), and value array (trigger on change).
useReducer() overview1:16
Discover how the useReducer hook uses a first argument as the state value and a second argument as a function that changes the state, dispatch actions, and mirror redux patterns.
Context overview1:53
Explain context as a means to pass a value from a parent to deeply nested components, enabling a global state, read and update via the provider.
useContext() overview2:33
Create a context with React.createContext, wrap the app in a provider with a value prop, then use useContext to read and update the global state.
Migration Guide from Redux to React hooks0:45
Explore a Redux to React hooks migration with minimal changes: keep actions and reducers intact, export both initial state and reducer, pass them to useReducer, and follow a code example.
6 ways to update state reference0:09
Explore a table that compares six ways to read an update state in React, helping you quickly resolve confusion and refer back to this table.
For more free courses in the future follow me on twitter0:02

Introduction0:34
Demonstrate building a basic app by wiring a React hook alongside existing Redux code. Compare React hooks and Redux side by side while integrating them into the project.
Starter Code
creating your first React hook2:01
Turn a class component into a functional React hook using React 16.8+, set up a hooks folder, and build a hooks container to test the app.
adding the useState() hook2:27
Learn to use the useState hook in React by importing, destructuring, initializing to zero, and updating state with a set function through simple increment and decrement examples.
adding the useEffect() hook3:57
Learn to implement the useEffect hook in a React app by importing useEffect, wiring it to state with useState, and using a 3000 ms timeout to update and render values.
adding the useReducer() hook4:27
Learn to implement the use reducer hook by importing a reducer, initializing state, and dispatching actions via action creators to drive user interface updates.
adding the useContext() hook7:22
Implement a global state using React context by wrapping root app with a provider and exposing state via the value prop. Use useContext to read and update state across components.
adding a Global state with Context4:54
Set up global state with context using the useReducer hook, mirroring redux with success and failure actions; expose state and dispatch, and toggle Prop 2 via two buttons.
creating a form with React Hooks2:26
Explore React hooks in action by building a form that updates state with useState, useReducer, and useContext, handling live input and submit events.
adding useReducer() to the form3:44
Explore implementing form state with useReducer, creating action types and action creators for input change and submit, and wiring a reducer and dispatch to manage user text in the form.
adding global state to the form5:45
learn to add global state to a form by wiring a user reducer to context, using context to dispatch actions, persist events, and display state across components.
Final Project Code

Requirements

Javascript and basic React

Description

React Hooks?

React Hooks are the biggest fundamental change to React since React Fiber in Late 2017.

Previous tutorials with Redux and older patterns are becoming obsolete. Stay competitive and learn the current and future version of React.

I will show you how to migrate from React-Redux to React hooks without changing any of your Redux Code

What this course will cover?

We will begin with a detailed explanation about each of the major hooks. Then once we understand the hooks at a deep level we will begin coding.

I will give a detailed explanation of React hooks then we will go over how to integrate React Hooks into existing React - Redux projects. We will build these hooks from scratch so you will get the best of both worlds.

We will cover all the major hooks and I will show you how to write them in code.

By the end of the tutorial you will have the building blocks necessary to build complex apps.

Who this course is for:

Beginner React students

React Hooks and Context (with React-Redux migration guide)

What you'll learn

Explore related topics

Course content

Introduction - Overview11 lectures • 13min

Project - Hooks12 lectures • 38min

Requirements

Description

Who this course is for: