React flashcards, generated for you.

JSX is syntax that looks like HTML/XML but is actually JavaScript. React transforms JSX into React.createElement() calls. For example, <div>Hello</div> becomes React.createElement('div', null, 'Hello').

Functional components are JavaScript functions that return JSX and can use Hooks. Class components extend React.Component and use lifecycle methods (componentDidMount, etc.). Both can manage state and have side effects, but functional components are now preferred.

React treats lowercase tags as HTML elements and uppercase tags as component references. <div /> is an HTML div, but <MyComponent /> tells React to look for a user-defined component called MyComponent. Lowercase components will throw an error.

The key prop helps React identify which items have changed, been added, or removed. Use a stable, unique identifier (like id) as the key. Using array indices as keys causes bugs when list order changes because React reuses DOM nodes incorrectly.

Props are immutable inputs passed from parent to child components. State is mutable data managed within a component. Props flow down; state is local. Modifying props directly is forbidden; state must be updated via setState() or the state setter function.

useState returns an array with two elements: [currentValue, setterFunction]. Example: const [count, setCount] = useState(0). Call setCount(newValue) to update state. Each call to setState triggers a re-render with the new state value.

React relies on the call order of Hooks to maintain state association. If Hook calls are conditional or nested, the call order changes between renders, breaking state correspondence. This causes 'Rules of Hooks' violations and unpredictable bugs.

useEffect runs side effects (data fetching, subscriptions, DOM updates) after render. useEffect(fn, []) runs fn only once after the first render. useEffect(fn, [dep]) runs when dep changes. useEffect(fn) runs after every render. Omitting the array runs the effect every render.

React relies on state setter functions to detect changes via reference comparison. Direct mutation doesn't create a new reference, so React thinks nothing changed and skips re-rendering. Always use setCount() or spread syntax: setState({...state, count: 5}).

A controlled component's value is tied to state and updates via onChange handlers: <input value={state} onChange={e => setState(e.target.value)} />. An uncontrolled component stores its own value in the DOM and uses refs to access it: <input ref={inputRef} />. Controlled components are preferred for form handling.