Interview question

How do you create HOCs (Higher-Order Components)? HOCs (Higher-Order Components) कैसे बनाते हैं?

Q: How do you create HOCs (Higher-Order Components)?

// HOC - function that takes a component and returns enhanced component function withTheme(WrappedComponent) { return function ThemedComponent(props) { const theme = { color: 'blue' }; return <WrappedComponent {...props} theme={theme} />; }; } // Using HOC const Button = ({ theme }) => ( <button style={{ color: theme.color }}>Click</button> ); const ThemedButton = withTheme(Button);

Answer

// HOC - function that takes a component and returns enhanced component
function withTheme(WrappedComponent) {
  return function ThemedComponent(props) {
    const theme = { color: 'blue' };
    return <WrappedComponent {...props} theme={theme} />;
  };
}

// Using HOC
const Button = ({ theme }) => (
  <button style={{ color: theme.color }}>Click</button>
);

const ThemedButton = withTheme(Button);

HOC pattern:
const Enhanced = withEnhancement(OriginalComponent);

Functions जो component लेते हैं और enhanced component return करते हैं।

Was this answer clear?

Subjects

Related questions