Learn
Cheatsheet
React
Components, hooks, and patterns at a glance.
Components & JSX
| function Comp() { return <div />; } | Functional component |
| <Comp prop="val" /> | Render component with prop |
| {expression} | Embed JS expression in JSX |
| className="..." | CSS class in JSX (not class) |
| <>{...}</> | Fragment — no extra DOM node |
State & useEffect
| const [s, setS] = useState(init) | Local state with initial value |
| setS(newValue) | Update state — triggers re-render |
| setS(prev => prev + 1) | Functional update from previous state |
| useEffect(() => {...}, []) | Run once after mount |
| useEffect(() => {...}, [dep]) | Run when dep changes |
| useEffect(() => { return cleanup; }, []) | Return a cleanup function |
Props & Context
| function Comp({ name, age }) | Destructure props in parameter |
| props.children | Content between opening/closing tags |
| const ctx = useContext(MyContext) | Read context value |
| <MyContext.Provider value={...}> | Provide context to subtree |
Event Handling
| onClick={handleClick} | Click event |
| onChange={e => setValue(e.target.value)} | Controlled input |
| onSubmit={e => { e.preventDefault(); ... }} | Form submit |
| key={item.id} | Unique key for list items |
Performance Hooks
| useMemo(() => compute(), [dep]) | Cache expensive computed value |
| useCallback(() => fn(), [dep]) | Memoize callback reference |
| const ref = useRef(null) | Persist value or reference DOM node |
| React.memo(Component) | Skip re-render if props unchanged |