Component Patterns Interview Questions
With Answers & Code Examples

Compound components work together, sharing state implicitly through context. The parent manages state; children access it without explicit prop passing.

const TabsContext = createContext(null);

function Tabs({ children, defaultTab }) {
  const [active, setActive] = useState(defaultTab);
  return (
    
      
{children}
    
  );
}

function TabList({ children }) {
  return 
{children}
;
}

function Tab({ id, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
     setActive(id)}
    >
      {children}
    
  );
}

function TabPanel({ id, children }) {
  const { active } = useContext(TabsContext);
  return active === id ? 
{children}
 : null;
}

// Usage — clean, flexible, no prop drilling

  
    Profile
    Settings
  
  
  

// Render props — component shares state by calling a function prop
function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    
 setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)} {/* caller decides what to render */}
    
  );
}

// Usage
 (
  
Mouse at {x}, {y}
)} />

// children as a function (same pattern)

  {({ x, y }) => }

Render props vs custom hooks:

• Custom hooks replaced most render prop use cases (simpler, less nesting)
• Render props still shine when you need to inject JSX into a specific DOM location managed by the component
• Libraries like React Table, Downshift, and Formik use render props for maximum flexibility

// ─── auth-context.tsx ───────────────────────────────────────────────────────
type AuthContextValue = {
  user: User | null;
  login: (credentials: Credentials) => Promise;
  logout: () => void;
};

const AuthContext = createContext(null);

// Provider encapsulates all auth logic
export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState(null);

  const login = useCallback(async (creds) => {
    const user = await api.login(creds);
    setUser(user);
  }, []);

  const logout = useCallback(() => {
    api.logout();
    setUser(null);
  }, []);

  return (
    
      {children}
    
  );
}

// Custom hook — type-safe, error if used outside provider
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

// ─── app layout ──────────────────────────────────────────────────────────────

  
    
      
    
  

The pattern separates data concerns (fetching, state) from UI concerns (rendering, styling):

// ❌ Old way — explicit Container component
function UserListContainer() {
  const [users, setUsers] = useState([]);
  useEffect(() => { fetchUsers().then(setUsers); }, []);
  return ; // pass data down
}

function UserList({ users }) {
  return users.map(u => );
}

// ✅ Modern way — custom hook achieves the same separation
function useUsers() {
  return useQuery(['users'], fetchUsers);
}

// Presentational component stays the same
function UserList({ users }) {
  return users.map(u => );
}

// Consuming component — much simpler
function UsersPage() {
  const { data: users } = useUsers();
  return ;
}

Still relevant principles:

• Keep components that render UI free of data-fetching — easier to test, reuse in Storybook
• The separation now lives in custom hooks, not wrapper components