ReactJS Advanced Concepts Syllabus

Advanced Concepts syllabus — full chapter and topic list

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

1. 1

   Higher-Order Components

   3 topics

   • What are Higher-Order Components?
   • Creating Higher-Order Components
   • Using Higher-Order Components
2. 2

   Render Props

   3 topics

   • What are Render Props?
   • Implementing Render Props
   • Examples of Render Props
3. 3

   Portals

   3 topics

   • What are Portals?
   • Creating Portals
   • Use Cases for Portals

Advanced Concepts flashcards for ReactJS

21 of 50 cards from the Advanced Concepts deck — real questions with worked answers.

1. What is a Higher-Order Component (HOC) in React?

   A Higher-Order Component is a function that takes a component and returns a new component, adding extra behavior or props. It is a pattern for reusing component logic, not part of the React API itself.

2. What is the general function signature of a Higher-Order Component?

   const EnhancedComponent = higherOrderComponent(WrappedComponent). The HOC receives a component as an argument and returns a new (enhanced) component.

3. On which JavaScript concept are HOCs based, and what is the analogy to functions?

   HOCs are based on composition. They are analogous to higher-order functions: just as a higher-order function takes/returns a function, an HOC takes a component and returns a component.

4. Do HOCs modify the input component or use inheritance?

   No. A proper HOC does not modify or mutate the input component and does not use inheritance. It composes the original component by wrapping it in a container component.

5. What are the two main categories of HOC implementation techniques?

   1) Props Proxy (the HOC manipulates the props passed to the wrapped component), and 2) Inheritance Inversion (the HOC extends the wrapped component).

6. In a Props Proxy HOC, what can the HOC do?

   It can manipulate props (add/edit/remove), abstract and manage state, wrap the component in other elements, and access the wrapped component's instance via refs.

7. What is a minimal Props Proxy HOC that injects an extra prop?

   function withExtra(Wrapped) { return function(props) { return <Wrapped {...props} extra="value" />; }; } The spread {...props} passes through original props.

8. Why must you always spread the original props ({...props}) inside an HOC?

   So the enhanced component remains transparent: it forwards all props it doesn't care about to the wrapped component, preserving the original component's interface.

9. What is a common HOC use case in real-world libraries?

   Cross-cutting concerns such as connecting to a store (Redux's connect), adding routing props (withRouter), theming, subscribing to data sources, and injecting shared logic.

10. What is the naming convention for HOCs and why does it matter?

    Prefix with 'with', e.g. withSubscription, withRouter, withAuth. It signals the value is an HOC and improves readability of the composed component tree.

11. How should you set the displayName of an HOC-produced component for debugging?

    Set Enhanced.displayName = `WithSubscription(${getDisplayName(Wrapped)})`, where getDisplayName returns Wrapped.displayName || Wrapped.name || 'Component'. This makes HOCs clear in React DevTools.

12. What React feature must HOCs handle explicitly because it is not a prop?

    Refs. Refs are not passed through automatically. Use React.forwardRef inside the HOC to forward the ref to the wrapped component.

13. What static-method problem occurs with HOCs, and how is it solved?

    Static methods of the wrapped component are lost on the enhanced component. Solution: copy them over manually or use the hoist-non-react-statics library to hoist all non-React statics.

14. Where must HOCs NOT be applied, and why?

    Not inside a component's render method. Applying an HOC in render creates a brand-new component type each render, forcing a full remount and losing state. Apply HOCs at module/definition level.

15. How do you compose multiple HOCs cleanly?

    Use function composition, e.g. compose(withRouter, connect(mapState))(Component), which is equivalent to withRouter(connect(mapState)(Component)).

16. What is a Render Prop in React?

    A render prop is a technique for sharing code between components using a prop whose value is a function that returns a React element, letting the component call it to render dynamic content.

17. What problem do render props solve, similar to HOCs?

    They enable sharing/reuse of cross-cutting stateful logic between components without inheritance, giving the consumer control over what is rendered.

18. Give the canonical shape of a component using a render prop.

    <DataProvider render={data => <h1>{data.value}</h1>} />. The DataProvider computes data and calls props.render(data) internally to produce the output.

19. Does the prop that supplies the render function have to be named 'render'?

    No. Any prop whose value is a function returning an element is a render prop. It can be named anything; 'render' and 'children' are just common choices.

20. What is the children-as-a-function pattern in the context of render props?

    Passing the function as the children prop: <Mouse>{mouse => <Cat pos={mouse} />}</Mouse>. Internally the component calls this.props.children(state).

21. Inside a render-prop component, how does it invoke the render prop?

    In its render method it calls the function prop with its internal state, e.g. return this.props.render(this.state); (or this.props.children(this.state)).

See more Advanced Concepts flashcards →

Planning Advanced Concepts for ReactJS

Advanced Concepts (ReactJS) FAQ