Advanced React Hooks | Build a note-taking app with useReducer | useContext useMemo and useCallback

Part 1: In this tutorial, you will learn how to properly use the Advanced React Hooks such as useReducer, useContext, useMemo, useCallback and useRef and get the most React.js bang for the buck.

Using mental models, which was first introduced by the late Nobel laureate Richard Feynman in the 20th century , we will learn how to construct an understandable model of these complex hooks so that they won’t sound quite complicated. We will also create a To-do list app using useReducer that follows the reducer/dispatcher model. To get a better look of the app, Tailwind CSS will be used as well.
Please like the video and subscribe to the channel to get the upcoming content. Part 2 will be uploaded soon. Don’t miss it!
#React #Hooks #useReducer #useMemo #useContext #useCallback #useRef

Github Repository:
Other relevant videos:

Build a full stack weather app using Next.js (part 1):

Build a full stack weather app using Next.js – Data Persistence (part 2):

0:00 Intro to React Hooks
2:00 useReducer
4:33 A mental model to learn useReducers better
9:10 Installing Tailwind CSS
12:23 React and React-Router-Dom settings
25:52 The first useReducer codes
46:42 The second useReducer codes – Create a Note-Taking app
1:28:38 useContext
1:32:00 A mental model to learn useContext better
1:33:42 useContext codes