React

library

• Quick Start – React
• Prefer Functional components over React Class Components

React Hooks

• any function starting with “use”, is called a Hook.
• it’s helpful to think of them as unconditional declarations about your component’s needs.
• Can only be called in top level functions

UseEffect

useEffect(() => {}) runs on every render useEffect(() => {}, []) only runs once after component has been mounted useEffect(() => {}, [...deps]) runs whenever any deps changes

• You can also specify a cleanup function which runs when it unmounts

useEffect(() => {
  return () => { // cleanup stuff }
}, [...deps])

React Props / Prop Drilling React Forms React Fragment React Query

React State Management

• State: A Component’s Memory – React
• Custom State Management in CSWE-03
• State is isolated & private: if you render the same component twice, each copy will have completely isolated state
• [state, setState] = useState()

React Memo for Memoization React Portals React Refs React Error Boundaries

Commands

# create typescript react app
npx create-react-app my-app --template typescript