ReactJS React Components Syllabus

React Components syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React Components in ReactJS, not a summary of it.

1. 1

   Functional Components

   3 topics

   • Creating Functional Components
   • Props in Functional Components
   • State in Functional Components
2. 2

   Class Components

   3 topics

   • Creating Class Components
   • Lifecycle Methods
   • State and Props in Class Components
3. 3

   Component Communication

   3 topics

   • Parent to Child
   • Child to Parent
   • Sibling to Sibling

React Components flashcards for ReactJS

19 of 50 cards from the React Components deck — real questions with worked answers.

1. What is a functional component in React?

   A JavaScript function that accepts a single props object as an argument and returns React elements (JSX) describing what should appear on the screen.

2. Write the minimal syntax for a functional component named Greeting that renders "Hello".

   function Greeting() { return <h1>Hello</h1>; } — or as an arrow function: const Greeting = () => <h1>Hello</h1>;

3. What naming rule must every React component (functional or class) follow, and why?

   Its name must start with a capital letter. React treats lowercase names as built-in DOM tags (e.g. <div>) and capitalized names as user-defined components.

4. Can a functional component return multiple sibling elements without a wrapping tag?

   Yes, by wrapping them in a Fragment: <>...</> or <React.Fragment>...</React.Fragment>, which groups children without adding an extra DOM node.

5. Before React 16.8 (Hooks), what was the key limitation of functional components?

   They were stateless: they could not hold local state or use lifecycle methods, so they were used only as simple presentational ("dumb") components.

6. What must a functional component return to render nothing at all?

   null (or false). Returning null tells React to render nothing for that component.

7. What are props in React?

   Props (properties) are read-only inputs passed from a parent to a child component as attributes, allowing the parent to configure and pass data to the child.

8. How do you access props inside a functional component?

   Through the function's first parameter, e.g. function Card(props) { return <p>{props.title}</p>; }, or by destructuring: function Card({ title }) {...}.

9. Are props mutable or immutable inside the receiving component?

   Immutable (read-only). A component must never modify its own props; it must treat them as read-only to keep behavior predictable.

10. How do you provide a default value for a missing prop in a functional component?

    Use default parameter values when destructuring, e.g. function Btn({ label = "Click" }) {...}, or set Btn.defaultProps = { label: "Click" }.

11. What is props.children and how is it populated?

    props.children holds whatever JSX is nested between a component's opening and closing tags, e.g. <Box>Hello</Box> makes props.children equal to "Hello".

12. How do you pass a function as a prop, and why is it commonly done?

    Pass it like any value: <Child onSave={handleSave} />. It lets a parent give the child a callback, commonly used so the child can send data back up (child-to-parent communication).

13. Which Hook adds local state to a functional component?

    The useState Hook, imported from React: const [state, setState] = useState(initialValue);

14. What does useState return?

    An array of exactly two elements: the current state value and a setter function to update it. It is typically destructured, e.g. const [count, setCount] = useState(0).

15. When does the useState initializer argument actually run?

    Only on the component's first render (initial mount). On subsequent re-renders the argument is ignored and the current state is used.

16. Why should you use the functional updater form setCount(prev => prev + 1) instead of setCount(count + 1)?

    Because state updates may be batched/asynchronous; the functional form always receives the latest state, avoiding stale-value bugs when multiple updates happen together.

17. Does calling a useState setter mutate the current state variable immediately within the same render?

    No. The setter schedules a re-render; the state variable in the current render keeps its old value. The updated value is available on the next render.

18. Two rules govern where Hooks like useState may be called. What are they?

    1) Only call Hooks at the top level (never inside loops, conditions, or nested functions). 2) Only call Hooks from React function components or custom Hooks.

19. How do you correctly update a single field of an object stored in state with useState?

    Create a new object copying the old one and overriding the field: setUser(prev => ({ ...prev, name: "Al" })); never mutate the existing object directly.

See more React Components flashcards →

Planning React Components for ReactJS

React Components (ReactJS) FAQ