Quiz for Higher-Order Components (HOC)

Q1: What is a Higher-Order Component (HOC) in React?

A. A. A function that takes a component and returns a new enhanced component B. B. A component that handles user input C. C. A component used only for routing D. D. A hook that manages state

Q2: Which of these is NOT a typical use case for HOCs?

A. A. Reusing component logic B. B. Adding conditional rendering C. C. Directly managing DOM elements D. D. Handling cross-cutting concerns like logging

Q3: How do HOCs help in React applications?

A. A. By enabling code reuse and separation of concerns B. B. By providing routing functionality C. C. By styling components D. D. By creating hooks

Q4: What is an important rule when creating HOCs?

A. A. Do not mutate the original component B. B. Always add styles C. C. Use only class components D. D. Only use in class lifecycle methods

Q5: Which lifecycle methods can HOCs use when wrapping class components?

A. A. componentDidMount and componentWillUnmount B. B. Only render C. C. useState and useEffect D. D. None, HOCs can’t use lifecycle methods

Q6: Which of these is a common naming convention for HOCs?

A. A. withSomething B. B. getSomething C. C. useSomething D. D. onSomething

Q7: How does a HOC differ from a regular component?

A. A. It returns a new component by wrapping the original B. B. It always renders nothing C. C. It directly manipulates state D. D. It is a hook

Q8: Which React pattern is an alternative to HOCs?

A. A. Render Props B. B. useState C. C. Class Components D. D. JSX

Q9: What is a pitfall to avoid when using multiple HOCs?

A. A. Wrapping components too deeply causing "wrapper hell" B. B. Using arrow functions C. C. Using functional components D. D. Passing props

Q10: How can HOCs pass props to the wrapped component?

A. A. By forwarding props received from the HOC B. B. By mutating the wrapped component C. C. By modifying the global state D. D. By rewriting the JSX

Q11: What React feature can replace some use cases of HOCs?

A. A. Hooks B. B. Redux C. C. React Router D. D. PropTypes

Q12: Which of these is an example of a built-in HOC in React ecosystem?

A. A. withRouter from react-router B. B. useState C. C. useEffect D. D. React.memo

Q13: How do you handle static methods in the wrapped component when using HOCs?

A. A. Copy static methods to the enhanced component B. B. Ignore them C. C. Remove static methods D. D. Convert to instance methods

Q14: What is the “props collision” problem in HOCs?

A. A. When HOC’s props override wrapped component’s props unintentionally B. B. When props are not passed at all C. C. When props are mutated D. D. When props have wrong types

Q15: Which tool helps avoid props collision in HOCs?

A. A. Prop renaming and careful prop management B. B. Using Redux C. C. Inline styles D. D. React DevTools

Q16: Why should HOCs be pure functions?

A. A. To avoid side effects and keep predictable behavior B. B. To handle DOM updates C. C. To manipulate state directly D. D. To bypass React lifecycle

Q17: How can you debug HOCs effectively?

A. A. Use meaningful display names for wrapped components B. B. Avoid using console.log C. C. Rename components D. D. Use inline styles

Q18: What is a good displayName convention for HOCs?

A. A. HOCName(WrappedComponentName) B. B. WrappedComponentNameHOC C. C. Only HOCName D. D. Only WrappedComponentName

Q19: Which statement is true about HOCs and refs?

A. A. Refs don’t automatically pass through HOCs unless forwarded B. B. Refs always pass through HOCs C. C. HOCs never support refs D. D. Refs are not used in React