Learn how to make your React project interactive by using state. Learn common patterns when using state and how to extract state into a reusable context. Finally, persist state data in the browser with local storage and useEffects.

Completed Lecture Code: https://github.com/CS61D/Lecture-React
Finished Project: https://dice.education.codifyberkeley...

Timestamps

State Intro
0:00 Recap
1:19 Why we need state
4:21 Simple useState example
6:40 React State conventions and rules
10:43 Controlling Inputs with State
14:15 Updating Array in State
16:33 Functional State Updates
21:35 Finishing the Stateful DieInput

Hosting and Sharing State
25:49 Motivation for Hoisting State
28:52 Passing State down through Props
33:47 Passing Event Handlers to Child Components
36:42 Remove an Item from an Array in State

Finishing the Dice Roller
39:15 Results State
41:20 Handing Rolls
46:49 Handle Clear Results
48:28 Conditional Rendering

React Context
55:05 Motivation for React Context
1:00:02 Creating a React Context
1:08:26 Using the Context with a custom hook
1:11:56 Centralizing State Logic
1:17:00 Eliminating Passed Props

Effects and Local Storage
1:20:28 Local Storage
1:21:59 useEffect
1:25:54 Loading from Local Storage
1:28:01 Outro

Additional Resources
React Assignment (extra practice): https://education.codifyberkeley.org/...