← React Beginner Questions - Set 8 Q72

What are higher-order components (HOCs) in React?

React Beginner Questions - Set 8

Example

1
2
3
4
5
6

const withLogger = (Wrapped) => (props) => {
  useEffect(() => console.log('mounted', Wrapped.name), []);
  return <Wrapped {...props} />;
};

const LoggedList = withLogger(List);

What to notice

• A function from component to component; `{...props}` forwarding is mandatory.