Components - OO vs. Func

[librasteve]

https://react.dev/reference/react/Component says

We recommend defining components as functions instead of classes. See how to migrate.

https://news.ycombinator.com/item?id=35187959#:~:text=%3E%20Why%20did%20react%20(effectively),%3E says

But that's not how most people actually structure their React code. Instead, they continue to model their application as an aggregation of conceptual objects a la OOP. Forms. Widgets. Color pickers and the like. Each with its own persisted state. The fact that you've architected React to avoid semantic classes is orthogonal to the fact that people are still using it to implement conceptual classes.

(amongst other things)

[librasteve]

https://chatgpt.com/share/675b55ba-c528-8009-9e7d-d1ff8a91df70

says HOC is bad (passing callbacks into the component):

import withTheme from './withTheme';
import withAuth from './withAuth';
import withData from './withData';
import withLogging from './withLogging';

function MyComponent({ theme, user, data }) {
  return (
    <div style={{ backgroundColor: theme.background }}>
      <h1>Welcome, {user.name}</h1>
      <p>Data: {data}</p>
    </div>
  );
}

// Wrapping the component with multiple HOCs
export default withTheme(
  withAuth(
    withData(
      withLogging(MyComponent)
    )
  )
);

vs. hooks is good:

import { useTheme } from './themeContext';
import { useAuth } from './authContext';
import { useData } from './dataContext';
import { useLogging } from './loggingHook';

function MyComponent() {
  const theme = useTheme();
  const user = useAuth();
  const data = useData();
  useLogging('MyComponent rendered');

  return (
    <div style={{ backgroundColor: theme.background }}>
      <h1>Welcome, {user.name}</h1>
      <p>Data: {data}</p>
    </div>
  );
}

export default MyComponent;