React flashcards, generated for you.

JSX is a syntax extension that lets you write HTML-like code in JavaScript. It compiles to React.createElement() calls. Example: <div>Hello</div> becomes React.createElement('div', null, 'Hello').

React treats lowercase tags as HTML elements and uppercase as component references. <div/> is an HTML div, but <MyComponent/> tells React to instantiate the MyComponent class or function.

Props are immutable data passed from parent to child. State is mutable data owned by a component that triggers re-renders on change. Props flow down; state is local.

It controls when the effect runs: empty [] runs once on mount; omitted runs every render; [dep1, dep2] runs when those dependencies change. Missing deps is a common bug—use the ESLint rule.

React relies on hook call order to match state to each useState/useEffect. Conditional calls change that order, causing state to be assigned to wrong hooks. Always call hooks at the top level of components or custom hooks.

Controlled: React state manages the input value (onChange updates state, value comes from state). Uncontrolled: DOM manages value via useRef—read it only when needed, like on form submit.

React uses reference equality to detect changes. Mutating an object (state.name = 'new') keeps the same reference, so React thinks nothing changed. Always create new objects: setState({...state, name: 'new'}).

Key helps React identify which items changed/reordered. Using array index as key breaks when lists are reordered, filtered, or have insertions—items get wrong state. Use unique, stable IDs instead.

Wrap the component in React.memo (prevents re-render if props haven't changed), use useCallback to memoize function props, or useMemo for expensive objects passed as props. Without these, even unchanged props cause child re-renders.

Without cleanup, subscriptions, timers, and event listeners persist after unmount, causing memory leaks. Return a cleanup function that unsubscribes, clears timers, or removes listeners: useEffect(() => { const unsub = onData(...); return () => unsub(); }, [])