The Odin Project React Syllabus

Why is using an array index as a key considered an anti-pattern?

If the list is reordered, filtered, or items are inserted/removed, indexes shift so keys no longer identify the same items. React then mismatches state and DOM nodes, causing bugs and unnecessary re-renders. Indexes are acceptable only for static lists that never change.

What are the rules for choosing good keys?

Keys must be unique among siblings and stable across renders — ideally IDs from your data or database. Do not generate keys during render (e.g. key={crypto.randomUUID()} inline), because a new key every render forces React to recreate the element and lose its state.

What is state in React?

A component's memory: data that persists between renders and, when updated, triggers React to re-render the component. It is managed with hooks like useState in function components.

Describe the useState hook and its return value.

const [value, setValue] = useState(initialValue). It returns an array with the current state value and a setter function; calling the setter schedules a re-render with the new value. The initial value is used only on the first render.

What are the Rules of Hooks?

1) Only call hooks at the top level of a function component or custom hook — never inside loops, conditions, or nested functions. 2) Only call hooks from React function components or custom hooks, not regular JavaScript functions.

Why should you never mutate state directly in React?

React compares state references to decide whether to re-render; mutating an object or array in place keeps the same reference, so React may not detect the change. Always call the setter with a new value, e.g. a copied object ({ ...obj, key: val }) or array ([...arr, item]).

What does it mean that state updates are asynchronous and that renders capture a 'snapshot' of state?

Calling a setter does not change the state variable in the currently running code; it schedules a re-render. Each render's functions see the state values from the render they were created in, so reading state right after setting it still gives the old value.

What is an updater function in setState, and when should you use it?

Passing a function to the setter, e.g. setCount(prev => prev + 1), makes React compute the new state from the latest pending state. Use it when the new state depends on the previous state, especially for multiple updates in one event handler.

What is state batching in React?

React groups multiple state updates that occur in the same event handler (and, since React 18, in promises and timeouts too) into a single re-render for performance, instead of re-rendering after each setter call.

What triggers a React component to re-render?

A change to its own state (via a setter), a re-render of its parent (which re-renders children by default), or a change in context it consumes. Props changing is a consequence of the parent re-rendering.

What does 'lifting state up' mean?

Moving shared state to the closest common ancestor of the components that need it. The ancestor passes the state down as props and passes setter callbacks so children can update it, keeping a single source of truth.

What is a controlled component (controlled input)?

A form element whose value is driven by React state: the input's value prop is set from state and its onChange handler updates that state, making React the single source of truth for the input's contents.

What is a side effect in React, and which hook handles them?

Any operation that reaches outside the rendering calculation — fetching data, timers, subscriptions, directly manipulating the DOM. The useEffect hook runs such code after the component renders.

Explain the three parts of useEffect(callback, dependencies).

The callback runs after render and contains the effect; it may return a cleanup function that runs before the effect re-runs and when the component unmounts; the dependency array controls when the effect re-runs (only when a listed value changes).

How does the useEffect dependency array change when the effect runs?

No array: the effect runs after every render. Empty array []: it runs only once after the initial mount (plus cleanup on unmount). Array with values [a, b]: it runs after mount and whenever any listed value changes.

When does a useEffect cleanup function run, and give a typical use case.

It runs before the effect executes again and when the component unmounts. Typical uses: clearing intervals/timeouts (clearInterval), removing event listeners, or aborting/cancelling subscriptions and fetches to prevent memory leaks.

When should you NOT use useEffect?

When a value can be computed from existing props/state during render (derive it instead), when responding to a user event (put the logic in the event handler), or to 'sync' state to other state. Effects are for synchronizing with external systems only.

In the CV Application project pattern, how is switching between edit mode and display mode implemented?

With a boolean piece of state (e.g. isEditing). Conditional rendering shows a form with controlled inputs when true and a read-only display of the submitted data when false; submitting the form updates state and flips the flag.

In the Memory Card project, what causes the cards to re-shuffle and how is the score tracked?

Clicking a card updates state (e.g. a list of already-clicked card IDs), which triggers a re-render that shuffles the card array. If the clicked card is already in the list, the current score resets and best score is updated; otherwise the score increments.

How do you define a class-based React component?

Create a class that extends React.Component with a render() method returning JSX. State is initialized in the constructor (after calling super(props)) as this.state, and updated with this.setState(); props are accessed via this.props.

Why do class component event handlers often need bind (or arrow functions)?

When a method is passed as a callback, it loses its 'this' binding, so this.setState would be undefined. Fix it by binding in the constructor (this.handleClick = this.handleClick.bind(this)) or defining the handler as a class-field arrow function.

Name the three main lifecycle phases of a class component and their key methods.

Mounting: constructor → render → componentDidMount. Updating (props or state change): render → componentDidUpdate. Unmounting: componentWillUnmount, used for cleanup like removing listeners or timers.

How does useEffect map onto class lifecycle methods?

useEffect with [] ≈ componentDidMount; useEffect with dependencies ≈ componentDidUpdate for those values; the effect's returned cleanup function ≈ componentWillUnmount. One hook can replace all three.

Which libraries does The Odin Project use for React testing, and what does each do?

Vitest (or Jest) as the test runner/assertion framework, React Testing Library (@testing-library/react) to render components and query the DOM as a user would, and @testing-library/user-event to simulate realistic user interactions like clicks and typing.

In React Testing Library, what is the difference between getBy, queryBy, and findBy queries?

getBy* throws an error if no match is found (use when the element should exist); queryBy* returns null instead of throwing (use to assert absence); findBy* returns a promise and waits for the element (use for elements that appear asynchronously).

Why does React Testing Library recommend queries like getByRole over test IDs or CSS selectors?

Querying by accessible role, label, or text tests the component the way users (and assistive technology) experience it, making tests more robust to implementation changes and encouraging accessible markup. Test IDs are a last resort.

What is a mock function in testing, and why mock callback props?

A fake function (e.g. vi.fn() or jest.fn()) that records how it was called. Passing it as a callback prop lets you assert the component invoked it correctly (toHaveBeenCalled, call counts, arguments) without running real logic — isolating the component under test.

What is PropTypes and how do you declare a required string prop?

A runtime type-checking library (the prop-types package) for component props that logs console warnings in development when props have wrong types. Declare with: MyComponent.propTypes = { name: PropTypes.string.isRequired }. Non-required props can get fallbacks via defaultProps or default parameters.

What are the core building blocks of React Router for client-side routing?

createBrowserRouter (defines an array of { path, element } route objects), RouterProvider (supplies the router to the app), <Link to="..."> for navigation without full page reloads, <Outlet /> to render child routes inside a parent layout, useParams to read dynamic URL segments like :id, and errorElement for unmatched/error routes.