The React Hooks Course

React Developer Tool will be needed for debugging React project

Project directory is created using webstorm and vite is used to install boiler code for React

This lecture covers ESLint which comes with the boiler coder from vite and prettier is installed to help with formating

A brief description of JSX and its attributes

This lecture goes into detail what a React Component is

This video examines how the React project works, we take a closer look at App.jsx, main.jsx, and index.html.  Also the React Developer Tool is used

A closer look at React render process

A comparison is made between React functional component and React Class component.  The Class component life cycle is closely examined

This lecture covers dynamic rendering certain aspects in JSX

This lecture covers how to effectively apply  destructuring in code

This lecture covers how to render list using the map function

Filtering a list

Filtering a list continued

Completed hands on exercise using filtering techniques

Brief introduction to conditional rendering in JSX

This lecture show how to do conditional rendering using If Else statement

This lecture show how to do conditional rendering using the Ternary operator

Brief introduction to using Logical And in JSX

Hands on approach to using Logical And (&&) to conditionally render elements

This lecture continues on Logical And rendering and it covers edge cases on using 0 as a conditional statement

Brief overview on how to apply styling in JSX

Hands on how to apply styling in JSX

Brief description of React Hooks

A closer look at the seven hooks covered in this section

Rules to follow when using React Hooks

Hands on how to use useState

This lecture covers the difference between a local variable and state variable

A closer look at the render cycle during a state change

This lecture describes snapshots taken during the render cycle

This lecture describes the batching process during the render cycle

This lecture covers how stale states are formed and how to avoid them

This lecture shows the correlation between private variables and state variables

This lecture shows how to lift up state

This lecture shows how to optimize initial variables using useState

This lecture covers useEffect in more detail

Hands on example for using useEffect

This lecture covers useRef in more detail

This lecture covers how useRef preserves variables after renders

This lecture covers how useRef can be used to access nodes

This lecture covers how use ForwardRef to pass useRef variables as props

This lecture covers useContext in more detail

This lecture covers a practical example of useContext

This lecture covers a practical example of useContext continued

Exercise for useContext

This lecture covers useReducer in more detail

This lecture covers a practical example of useReducer

This lecture covers a practical example of useReducer continued

Exercise for useReducer

This lecture covers useCallback in more detail

This lecture shows how to use useCallback to memoize functions

This lecture shows how to use useCallback and the memo function to memoize components

This lecture shows how to use useCallback in combination with useEffect

This lecture covers useMemo in more detail

This lecture how to use useMemo to optimize expensive calculations

This lecture covers useCustomHooks in more detail

This lecture covers how to write custom hooks