`function Component() { return <div /> }`	Function component
`const Component = () => <div />`	Arrow function component
`export default Component`	Default export
`export { Component }`	Named export
`<Component prop={value} />`	Using component
`<Component>{children}</Component>`	With children

📤 Props

`function Comp({ prop1, prop2 }) {}`	Destructure props
`function Comp({ prop = "default" }) {}`	Default prop value
`function Comp({ children }) {}`	Children prop
`<Comp {...props} />`	Spread props
`function Comp({ ...rest }) {}`	Rest props

📝 JSX

`<div className="cls">`	Class attribute
`<label htmlFor="id">`	For attribute
`{expression}`	JS expression in JSX
`{condition && <Comp />}`	Conditional render
`{cond ? <A /> : <B />}`	Ternary render
`{arr.map(x => <Item key={x.id} />)}`	List rendering
`<>{elements}</>`	Fragment (no wrapper)
`<React.Fragment key={id}>`	Fragment with key
`style={{ color: "red" }}`	Inline styles
`dangerouslySetInnerHTML={{ __html: html }}`	Raw HTML (careful!)

🪝 Hooks

📊 State Hooks

`const [state, setState] = useState(initial)`	State variable
`setState(newValue)`	Update state
`setState(prev => prev + 1)`	Functional update
`useState(() => expensiveCalc())`	Lazy initial state
`const [state, dispatch] = useReducer(reducer, init)`	Reducer state

⚡ Effect Hooks

`useEffect(() => { ... })`	Run after every render
`useEffect(() => { ... }, [])`	Run once on mount
`useEffect(() => { ... }, [dep])`	Run when dep changes
`useEffect(() => { return () => cleanup })`	Cleanup function
`useLayoutEffect(() => { ... })`	Sync after DOM update

🔗 Ref & Memo Hooks

`const ref = useRef(initialValue)`	Mutable ref
`<input ref={ref} />`	DOM ref
`ref.current`	Access ref value
`const memo = useMemo(() => calc, [deps])`	Memoize value
`const fn = useCallback(() => {}, [deps])`	Memoize function

🌐 Context Hooks

`const MyContext = createContext(default)`	Create context
`<MyContext.Provider value={val}>`	Provide context
`const value = useContext(MyContext)`	Consume context

🔧 Other Hooks

`const id = useId()`	Generate unique ID
`const [isPending, startTransition] = useTransition()`	Mark non-urgent update
`const deferredValue = useDeferredValue(value)`	Defer value update
`useSyncExternalStore(subscribe, getSnapshot)`	Subscribe to external store
`useImperativeHandle(ref, () => ({ method }))`	Customize ref handle
`useDebugValue(value)`	Debug label in DevTools

🎨 Patterns

🪝 Custom Hooks

`function useCustomHook() { ... }`	Custom hook (use prefix)
`return [state, actions]`	Return state and actions
`return { data, loading, error }`	Return object

📝 Custom Hook Example

 // useFetch custom hook
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// Usage
const { data, loading, error } = useFetch('/api/data'); 

🧩 Component Patterns

`React.memo(Component)`	Memoize component
`React.lazy(() => import("./Comp"))`	Lazy load component
`<Suspense fallback={<Loading />}>`	Suspense boundary
`<ErrorBoundary fallback={<Error />}>`	Error boundary
`forwardRef((props, ref) => ...)`	Forward ref to child
`createPortal(children, container)`	Render outside DOM tree

🎪 Events & Forms

🖱️ Event Handling

`onClick={handleClick}`	Click handler
`onClick={() => handleClick(id)}`	With argument
`onChange={e => setValue(e.target.value)}`	Input change
`onSubmit={handleSubmit}`	Form submit
`onKeyDown={e => e.key === "Enter" && ...}`	Keyboard event
`onFocus / onBlur`	Focus events
`onMouseEnter / onMouseLeave`	Mouse events
`e.preventDefault()`	Prevent default
`e.stopPropagation()`	Stop propagation

📋 Forms

`<input value={val} onChange={...} />`	Controlled input
`<input defaultValue={val} ref={ref} />`	Uncontrolled input
`<select value={val}>`	Controlled select
`<textarea value={val}>`	Controlled textarea
`<input type="checkbox" checked={bool}>`	Controlled checkbox
`e.target.value / e.target.checked`	Get input value

📊 State Management

🔄 useReducer

`const [state, dispatch] = useReducer(reducer, init)`	Setup reducer
`dispatch({ type: "ACTION", payload })`	Dispatch action
`function reducer(state, action) { switch... }`	Reducer function

📝 Reducer Example

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return initialState;
    default:
      throw new Error('Unknown action');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      
      
    
  );
}

⚡ Performance

🚀 Optimization

`React.memo(Component)`	Skip re-render if props same
`React.memo(Comp, areEqual)`	Custom comparison
`useMemo(() => value, [deps])`	Cache expensive calculation
`useCallback(() => fn, [deps])`	Cache function reference
`React.lazy(() => import(...))`	Code splitting
`<Suspense fallback={...}>`	Loading boundary
`startTransition(() => setState(...))`	Non-blocking update
`useDeferredValue(value)`	Defer expensive re-renders

💡 Performance Tips

Always use a unique key prop for list items
Move state as close to where it's used as possible
Use React.memo for expensive pure components
Wrap event handlers with useCallback when passed to memoized children
Use useMemo for expensive computations, not simple values

💡 Tips

🚀 Best Practices

Keep components small and focused on a single responsibility
Lift state up only when needed for sharing between components
Use custom hooks to extract and reuse stateful logic
Avoid inline function definitions in JSX when possible
Use useEffect cleanup to prevent memory leaks
Don't forget dependency arrays in hooks
Use React DevTools for debugging
Consider React Server Components for data-heavy pages