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.
Understanding React Hooks & Components Reference
React treats a render like a snapshot of the screen at one moment. Every time a function component runs, its variables are created again using the current props and state. A state setter does not usually change the variable immediately inside the running event handler.
It asks React to prepare another render. This explains why reading a state variable just after setting it can show the older value. When several updates depend on one another, the updater form is safer because React can apply each update in order.
Students should avoid storing values in state when those values can be calculated from existing props or state. Extra stored values can drift out of sync.
A React app is easier to understand when each piece of data has one clear owner. If two sibling components need the same information, move that state to their nearest shared parent. The parent can send the value down through props and give each child a callback for requesting a change.
This pattern is called lifting state up. It prevents one panel from showing a different answer than another panel. State updates should create new arrays and objects rather than editing old ones.
For example, use methods that return a new array when adding, removing, or replacing an item. React relies on changed references to detect many updates clearly.
Effects are for work outside React, such as timers, network requests, browser storage, document titles, or event listeners. They should not be the default place for calculations that belong in rendering. The dependency list is a record of which values the effect uses from the component.
Leaving out a used value can make the effect work with an old snapshot. Adding an unstable object or function can make it run more often than intended. Cleanup matters when a component disappears or when an effect runs again.
Without cleanup, an old timer may continue, a listener may be added twice, or a slow request may update the wrong screen. Development mode can run effect setup and cleanup extra times to reveal these problems.
Forms show the connection between browser events and React state. A controlled input gets its displayed value from state, so the state should be updated for every edit. Number inputs still provide text, which means conversion and validation need care.
Keep validation messages close to the field and use proper labels so keyboard and screen reader users can understand the form. For lists, a key identifies the item itself, not its current position.
A poor key can cause typed text, focus, or component state to appear on the wrong row after sorting or deleting. When debugging, inspect which component owns the data, check the values passed through props, and use React Developer Tools to watch renders and state changes.