📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › React Modern Development › Higher Order Components

Higher Order Components

5 min read
HOCs wrap a component and return an enhanced version: const WithAuth = (Comp) => isAuth ? <Comp/> : <Login/>. Custom hooks are now preferred over HOCs for most logic reuse cases in modern React applications.

Higher-Order Components (HOC)

function withLogging(Component) {
  return function WrappedComponent(props) {
    useEffect(() => {
      console.log(`${Component.name} mounted`);
      return () => console.log(`${Component.name} unmounted`);
    }, []);
    return ;
  };
}

const LoggedButton = withLogging(Button);