Compound & HOC — Series 3

Preview — 3 of 10 questions

This basic HOC has three well-known gaps. Which list is correct?

javascript

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

A(1) displayName — DevTools shows WithLogging for everything; set WithLogging.displayName = \withLogging(${Wrapped.displayName || Wrapped.name})\. (2) Ref forwarding — a ref passed to the wrapper does not reach Wrapped; use forwardRef and pass it through. (3) Static hoisting — non-React statics on Wrapped (like Wrapped.fetchData) are lost; copy them with hoist-non-react-statics

BIt needs PropTypes, key, and a <Fragment>

CIt must be a class component to work

DThere are no gaps; this is a complete HOC

An older Tabs used React.Children.map + cloneElement to inject the active index into direct children. Why does Context fix the nested-<div> case?

javascript

<Tabs defaultIndex={0}>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
    <div><Tabs.Tab>Two (nested!)</Tabs.Tab></div>
  </Tabs.List>
  <Tabs.Panel>...</Tabs.Panel>
</Tabs>

AContext makes cloneElement faster

BReact.Children.map only iterates direct children, so a Tabs.Tab wrapped in a <div> never receives the injected props and breaks. With Context, Tabs provides { activeIndex, setActiveIndex } and each Tabs.Tab reads it via useContext regardless of how deeply it is nested — arbitrary markup between Tabs and Tabs.Tab is fine

CcloneElement is deprecated

DContext prevents re-renders

What problem do prop getters solve that returning bare state/handlers does not?

javascript

function useToggle() {
  const [on, setOn] = useState(false);
  const getTogglerProps = ({ onClick, ...rest } = {}) => ({
    'aria-pressed': on,
    onClick: (e) => { onClick?.(e); setOn((v) => !v); },
    ...rest,
  });
  return { on, getTogglerProps };
}

AThey make the hook render faster

BThey avoid using Context

CA prop getter returns a merged set of props for an element, correctly combining the hook's own handlers/attributes with any the consumer passes. getTogglerProps({ onClick: myHandler }) runs both myHandler and the internal toggle, and merges aria-*, id, ref, etc. — the consumer cannot accidentally clobber the behavior by spreading their own onClick after the hook's

DThey replace useReducer

Answer all 10 questions (7 more), see explanations for every answer, and track your score.