const theme = use(ThemeContext);  
    
    
      // ...

` use ` returns the  context value  for the  context  you passed. To determine
the context value, React searches the component tree and finds **the closest
context provider above** for that particular context.

To pass context to a ` Button ` , wrap it or one of its parent components into
the corresponding context provider.

    
    
    function MyPage() {  
    
    
      return (  
    
    
        <ThemeContext.Provider value="dark">  
    
    
          <Form />  
    
    
        </ThemeContext.Provider>  
    
    
      );  
    
    
    }  
    
    
      
    
    
    function Form() {  
    
    
      // ... renders buttons inside ...  
    
    
    }

It doesn’t matter how many layers of components there are between the provider
and the ` Button ` . When a ` Button ` _anywhere_ inside of ` Form ` calls `
use(ThemeContext) ` , it will receive ` "dark" ` as the value.

Unlike [ ` useContext ` ](/reference/react/useContext) ,  ` use ` can be
called in conditionals and loops like  ` if ` .

    
    
    function HorizontalRule({ show }) {  
    
    
      if (show) {  
    
    
        const theme = use(ThemeContext);  
    
    
        return <hr className={theme} />;  
    
    
      }  
    
    
      return false;  
    
    
    }

` use ` is called from inside a  ` if ` statement, allowing you to
conditionally read values from a Context.

###  Pitfall

Like ` useContext ` , ` use(context) ` always looks for the closest context
provider _above_ the component that calls it. It searches upwards and **does
not** consider context providers in the component from which you’re calling `
use(context) ` .

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { createContext, use } from 'react';
    
    const ThemeContext = createContext(null);
    
    export default function MyApp() {
      return (
        <ThemeContext.Provider value="dark">
          <Form />
        </ThemeContext.Provider>
      )
    }
    
    function Form() {
      return (
        <Panel title="Welcome">
          <Button show={true}>Sign up</Button>
          <Button show={false}>Log in</Button>
        </Panel>
      );
    }
    
    function Panel({ title, children }) {
      const theme = use(ThemeContext);
      const className = 'panel-' + theme;
      return (
        <section className={className}>
          <h1>{title}</h1>
          {children}
        </section>
      )
    }
    
    function Button({ show, children }) {
      if (show) {
        const theme = use(ThemeContext);
        const className = 'button-' + theme;
        return (
          <button className={className}>
            {children}
          </button>
        );
      }
      return false
    }
    
    

Show more

###  Streaming data from the server to the client

Data can be streamed from the server to the client by passing a Promise as a
prop from a  Server Component  to a  Client Component  .

    
    
    import { fetchMessage } from './lib.js';  
    
    
    import { Message } from './message.js';  
    
    
      
    
    
    export default function App() {  
    
    
      const messagePromise = fetchMessage();  
    
    
      return (  
    
    
        <Suspense fallback={<p>waiting for message...</p>}>  
    
    
          <Message messagePromise={messagePromise} />  
    
    
        </Suspense>  
    
    
      );  
    
    
    }

The  Client Component  then takes  the Promise it received as a prop  and
passes it to the  ` use ` Hook. This allows the  Client Component  to read the
value from  the Promise  that was initially created by the Server Component.

    
    
    // message.js  
    
    
    'use client';  
    
    
      
    
    
    import { use } from 'react';  
    
    
      
    
    
    export function Message({ messagePromis