## Meta - https://www.youtube.com/watch?v=wIyHSOugGGw ## Notes - *Components* - basic building blocks - *JavaScript functions* that return *JSX* aka *markup* - *JSX* !== HTML - Can pass anything as props, including other components - Rendering - Uses *Virtual DOM* - Process - If state changes, React updates virtual DOM - React uses diffing to see what's changed - *reconciliation* to update real DOM with anything that's changed - Controlled Components have their internal state - Hooks - State hooks - useState - useReducer - Context hooks--use data passed through context - useContext - Ref hooks--reference HTML elements - Effect hooks--connect with external systems - Performance hooks - useMemo - Purity - How React components should work - Same input should result in same output (mathematical origin) - Strict mode - Detects problems at dev-time - Is a component - Context - Prevents passing explicitly props to nested children - Portals - Like Context but for components - Suspense - Handles loading components or data - Shows a fallback component until data is available - *lazy loading* components - Error Boundaries - Gracefully handle errors and show a fallback component with a helpful message