const App = () => (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

const App = () => {
  const inputRef = React.useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
};

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

const App = () => (
  <React.Profiler id="App" onRender={(id, phase, actualTime) => {
    console.log({ id, phase, actualTime });
  }}>
    <MyComponent />
  </React.Profiler>
);

const App = () => (
  <React.StrictMode>
    <MyComponent />
  </React.StrictMode>
);

const App = () => (
  <React.unstable_ConcurrentMode>
    <MyComponent />
  </React.unstable_ConcurrentMode>
);

// ServerComponent.server.js
export default function ServerComponent() {
  return <div>Server Component</div>;
}

// ClientComponent.client.js
import ServerComponent from './ServerComponent.server';

export default function ClientComponent() {
  return (
    <div>
      <ServerComponent />
    </div>
  );
}