React Hooks and Suspense

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

Syllabus

Use the useState React Hook
Test React Components that use React Hooks
Share Logic Across Multiple React Components with Custom Hooks
Store Values in localStorage with the React useEffect Hook
Test Effects Generated from React the useEffect Hook
Access and Modify a DOM Node with the React useRef and useEffect Hooks
Interact and Update State in React with useState
Declaratively Interact with Complex Component State using the React useReducer Hook
Simplify a Component Reducer with the React setState Hook
Share Complex Logic across React Components with Custom Hooks
Prevent Unnecessary Component Rerenders with React memo
Lazy Load a React Component with React.lazy and Suspense
Use the useState React Hook
Test React Components that use React Hooks
Share Logic Across Multiple React Components with Custom Hooks
Store Values in localStorage with the React useEffect Hook
Test Effects Generated from React the useEffect Hook
Access and Modify a DOM Node with the React useRef and useEffect Hooks
Interact and Update State in React with useState
Declaratively Interact with Complex Component State using the React useReducer Hook
Simplify a Component Reducer with the React setState Hook
Share Complex Logic across React Components with Custom Hooks
Detect user activity with a custom useIdle React Hook
Prevent Unnecessary Component Rerenders with React memo
Lazy Load a React Component with React.lazy and Suspense
Learn fundamentals of React Suspense
Learn fundamentals of React Suspense