ReactJS Hook Pattern ~Use Hook with Context~

・In ReactJS 19, the use hook was introduced to provide a more flexible way of reading context values than the 'useContext' hook. The use hook can be called conditionally inside if statements and loops, making it ideal for achieving dynamic behaviour in components.

import { createContext, useContext, use } from "react";
import "./app.css";

const ThemeContext = createContext(null);

function Button({ show, children }) {

  if (show) {
  const theme = use(ThemeContext);
    const className = "button-" + theme;
    return <button className={className}>{children}</button>;
  }

  return null;
}

function App() {
  return (
    <ThemeContext value="dark">
      <h1>Use Hook with Context</h1>
      <Button show={true}>Sign up</Button>
      <Button show={false}>Log in</Button>
    </ThemeContext>
  );
}

export default App;