React flashcards, generated for you.

JSX is a syntax extension that looks like XML/HTML but is not valid JavaScript. It must be compiled (by Babel) into React.createElement() calls. Example: <div>Hello</div> becomes React.createElement('div', null, 'Hello')

React treats lowercase tags as built-in HTML elements and uppercase as custom components. Lowercase tags become strings passed to createElement(), while uppercase tags are references to component functions/classes.

Props are read-only inputs passed from parent to child. State is mutable data managed within a component using useState(). State changes trigger re-renders; props are fixed for a component instance unless parent re-renders.

Hooks must be called at the top level of a component function (not inside loops, conditions, or nested functions). React relies on call order to match hooks to state slots. Breaking this causes the wrong state to be returned on re-renders.

The effect will not re-run when that dependency changes, causing stale closures and bugs. If dependency array is omitted entirely, the effect runs after every render (potential performance issue). Empty array [] means effect runs once on mount.

React compares object references to detect changes. Mutating state directly doesn't create a new object, so React doesn't see a change and won't re-render. Always create new objects: setState({...state, name: 'new'}) or setState(prevState => ({...prevState, name: 'new'}))

The key helps React identify which items have changed, been added, or been removed. Using array index as key causes bugs when items are reordered or removed (component state gets mixed up). Use unique, stable identifiers (IDs) instead.

Controlled components have their value managed by React state (via onChange). Uncontrolled components manage their own internal state (like a traditional HTML form) and use ref to access the value. Controlled components are preferred for predictable behavior.

This occurs when setState is called inside render or useEffect without dependencies (e.g., setState in JSX directly or useEffect with no dependency array). Fix: move setState to event handlers or wrap it in useEffect with proper dependencies, or use useCallback to prevent recreating functions.

React.memo wraps a functional component to skip re-rendering if props haven't changed (shallow comparison). Use it for expensive components whose parents re-render frequently but pass the same props. Gotcha: it only helps if parent stops creating new object/function props each render—use useCallback/useMemo if needed.