Aura Dev

React Cheatsheet

Essential React hooks and component patterns.

const [val, setVal] = useState(0)

Declare state variable

useEffect(() => { ... }, [])

Run once on mount

useEffect(() => { ... }, [val])

Run when val changes

useEffect(() => { return () => ... })

Cleanup function on unmount

const val = useContext(MyContext)

Consume context value

const ref = useRef(initialValue)

Mutable ref object (persists across renders)

ref.current

Access or modify ref value

const memoized = useMemo(() => compute(a, b), [a, b])

Memoize expensive calculation

const callback = useCallback(() => doSomething(a), [a])

Memoize function reference

export default function MyComponent() { ... }

Functional component

<MyComponent propName="value" />

Render component with props

{children}

Render nested elements (props.children)

const MemoizedComp = React.memo(MyComp)

Prevent re-renders if props don't change

<button onClick={handleClick}>

Click event

<input onChange={(e) => setVal(e.target.value)}>

Input change event

<form onSubmit={handleSubmit}>

Form submit event

e.preventDefault()

Prevent default browser behavior

Sponsored LinkAdvertisement Space (728x90)