React components and hooks help developers build interactive web pages from small, reusable pieces. This cheat sheet gives students a quick reference for writing function components, passing data with props, storing changing data with state, and running side effects. It is useful when building projects because many React errors come from small syntax or data flow mistakes.
Students in grades 10 to 12 can use it as a clean reminder while coding, debugging, or reviewing for assessments.
The most important idea is that a component is a function that returns JSX, and React re-renders the component when its state or props change. useState stores local values, useEffect runs code after rendering, and event handlers respond to user actions. Lists need stable keys, forms often use controlled inputs, and custom hooks let you reuse stateful logic. Good React code keeps components focused, passes data clearly, and avoids changing state directly.
Key Facts
- A basic function component uses function Welcome(props) { return <h1>Hello, {props.name}</h1>; } and must return one JSX value.
- Props are read-only inputs passed from a parent component, such as <Profile name="Maya" grade={11} />.
- State is local changing data created with const [count, setCount] = useState(0); and updated with setCount(count + 1).
- When the next state depends on the previous state, use the updater form setCount(c => c + 1) to avoid stale values.
- useEffect(() => { document.title = count; }, [count]); runs after render and runs again only when count changes.
- An effect cleanup returns a function, such as return () => clearInterval(id);, to stop timers, subscriptions, or listeners.
- Lists should use a stable key, such as items.map(item => <li key={item.id}>{item.name}</li>), not the array index when order can change.
- Controlled form inputs connect value and onChange, such as <input value={name} onChange={e => setName(e.target.value)} />.
Vocabulary
- Component
- A reusable function or class that returns JSX to describe part of the user interface.
- JSX
- A JavaScript syntax extension that looks like HTML and is used to describe React elements.
- Props
- Read-only data passed from a parent component to a child component.
- State
- Data stored inside a component that can change over time and cause the component to re-render.
- Hook
- A special React function, such as useState or useEffect, that lets function components use React features.
- Dependency Array
- The array passed to useEffect that tells React when the effect should run again.
Common Mistakes to Avoid
- Changing state directly, such as count = count + 1, is wrong because React will not know it needs to re-render. Use the setter function, such as setCount(count + 1).
- Forgetting the dependency array in useEffect is wrong when the effect should not run after every render. Add [] for one-time setup or [value] when the effect depends on value.
- Using array indexes as keys is wrong when list items can be added, removed, or reordered. React may match the wrong item to the wrong DOM element, so use a stable id when possible.
- Calling hooks inside loops, conditions, or nested functions is wrong because hooks must run in the same order on every render. Call hooks only at the top level of a React function component or custom hook.
- Writing event handlers as onClick={handleClick()} is wrong because it calls the function during render. Use onClick={handleClick} or onClick={() => handleClick(id)} instead.
Practice Questions
- 1 A component starts with const [count, setCount] = useState(0). If a button correctly calls setCount(c => c + 1) five times, what value will count show after React updates?
- 2 A component renders an array of 8 products with products.map(product => <Card key={product.id} />). If 3 products are filtered out before rendering, how many Card components appear?
- 3 Given useEffect(() => { console.log(score); }, [score]), how many times will the effect run if the component first renders with score = 10 and then score changes to 15, 20, and 20 again with no actual state change on the last update?
- 4 Explain why a custom hook for fetching user data can make a React app easier to maintain than copying the same useState and useEffect code into several components.