React
Component Basics
function App() { return <> }—Function component
export default Component—Default export pattern
<Component prop={val} />—Render with props
{ children }—Render child elements
<>{a}{b}</>—Fragment (no wrapper div)
key={id}—Unique key for lists
{cond && <El />}—Conditional rendering
{cond ? <A /> : <B />}—Ternary rendering
{list.map(x => <El />)}—Render list
Hooks - State & Effect
useState(initial)—State variable + setter
const [val, setVal] = useState()—Destructured state
setVal(prev => prev + 1)—Functional update
useEffect(() => {}, [])—Run on mount only
useEffect(() => {}, [dep])—Run when dep changes
useEffect(() => { return cleanup })—Cleanup on unmount
useLayoutEffect()—Sync effect before paint
Hooks - Advanced
useContext(Ctx)—Consume context value
useReducer(reducer, init)—Complex state logic
useRef(initialVal)—Mutable ref (persists)
useMemo(() => val, [dep])—Memoize computed value
useCallback(fn, [dep])—Memoize function reference
useId()—Generate unique ID (SSR safe)
useTransition()—Mark non-urgent updates
useDeferredValue(val)—Defer re-render of value
Props & TypeScript
interface Props { name: string }—Type component props
FC<Props>—Typed function component
children: React.ReactNode—Type for children prop
onClick: () => void—Event handler prop type
React.ChangeEvent<HTMLInputElement>—Input event type
React.FormEvent—Form submission event
ComponentProps<"button">—Inherit HTML element props
Context & State Management
createContext(defaultVal)—Create context
<Ctx.Provider value={val}>—Provide context value
useContext(Ctx)—Consume context
useReducer(reducer, init)—Dispatch-based state
dispatch({ type, payload })—Dispatch action
React.memo(Component)—Skip re-render if same props
Refs & DOM
const ref = useRef(null)—Create DOM ref
<div ref={ref}>—Attach ref to element
ref.current—Access DOM node
forwardRef((props, ref) => {})—Forward ref to child
useImperativeHandle(ref, ()=>({}))—Expose methods via ref
createPortal(el, container)—Render outside root DOM
Forms & Events
onChange={e => setVal(e.target.value)}—Controlled input
onSubmit={handleSubmit}—Form submit handler
e.preventDefault()—Prevent default behavior
<input value={val} />—Controlled component
<input defaultValue={val} />—Uncontrolled component
useRef for uncontrolled—Access input via ref
onClick / onBlur / onFocus—Common event handlers
Patterns & Best Practices
Custom hook: useXxx()—Extract reusable logic
Lift state up—Share state via parent
Composition over inheritance—Use children/render props
Error boundary (class)—Catch render errors
Suspense + lazy()—Code splitting / loading
React.StrictMode—Highlight potential issues
key prop to reset state—Force remount with new key
useEffect cleanup—Prevent memory leaks
allprintabledoc.com