Хук use для промісів і контексту

import { use } from 'react';

const userPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      name: 'Олена',
      role: 'Frontend Developer',
    });
  }, 1500);
});

function UserProfile() {
  const user = use(userPromise);

  return (
    <section>
      <h2>{user.name}</h2>
      <p>{user.role}</p>
    </section>
  );
}

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<p>Завантаження профілю...</p>}>
      <UserProfile />
    </Suspense>
  );
}

Завантаження профілю...

function UserProfile() {
  // Поганий приклад
  const userPromise = fetch('/api/user').then((response) => response.json());

  const user = use(userPromise);

  return <h2>{user.name}</h2>;
}

const userPromise = fetch('/api/user').then((response) => response.json());

function UserProfile() {
  const user = use(userPromise);

  return <h2>{user.name}</h2>;
}

import { Component, Suspense, use } from 'react';

const userPromise = Promise.reject(new Error('Не вдалося завантажити користувача'));

class ErrorBoundary extends Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return <p>Помилка: {this.state.error.message}</p>;
    }

    return this.props.children;
  }
}

function UserProfile() {
  const user = use(userPromise);

  return <h2>{user.name}</h2>;
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Завантаження...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

import { createContext, use } from 'react';

const ThemeContext = createContext('light');

function Button() {
  const theme = use(ThemeContext);

  return (
    <button className={`button button-${theme}`}>
      Зберегти
    </button>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Button />
    </ThemeContext.Provider>
  );
}

const ThemeContext = createContext('light');

if (isAdmin) {
  const value = useContext(Context); // Неправильно
}

import { createContext, use } from 'react';

const UserContext = createContext(null);

function UserActions({ showActions }) {
  if (!showActions) {
    return <p>Дії недоступні</p>;
  }

  const user = use(UserContext);

  return <p>Дії користувача: {user.name}</p>;
}

function Component() {
  try {
    const value = use(SomeContext); // Неправильно
    return <p>{value}</p>;
  } catch {
    return <p>Помилка</p>;
  }
}

import { createContext, Suspense, use } from 'react';

const ThemeContext = createContext('light');

const productPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      name: 'Механічна клавіатура',
      price: 3200,
    });
  }, 1000);
});

function ProductCard() {
  const product = use(productPromise);
  const theme = use(ThemeContext);

  return (
    <article className={`product product-${theme}`}>
      <h2>{product.name}</h2>
      <p>Ціна: {product.price} грн</p>
    </article>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Suspense fallback={<p>Завантаження товару...</p>}>
        <ProductCard />
      </Suspense>
    </ThemeContext.Provider>
  );
}

import {
  createContext,
  createElement,
  Suspense,
  use,
  useState,
} from 'react';
import { createRoot } from 'react-dom/client';

const ThemeContext = createContext('light');

const userPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      name: 'Марко',
      role: 'React Developer',
    });
  }, 1200);
});

function UserProfile() {
  const user = use(userPromise);
  const theme = use(ThemeContext);

  return (
    <section
      style={{
        padding: '16px',
        border: '1px solid #999',
        background: theme === 'dark' ? '#222' : '#fff',
        color: theme === 'dark' ? '#fff' : '#222',
      }}
    >
      <h2>{user.name}</h2>
      <p>{user.role}</p>
      <p>Поточна тема: {theme}</p>
    </section>
  );
}

function App() {
  const [theme, setTheme] = useState('light');

  function toggleTheme() {
    setTheme((currentTheme) =>
      currentTheme === 'light' ? 'dark' : 'light'
    );
  }

  return (
    <ThemeContext.Provider value={theme}>
      <main style={{ padding: '24px' }}>
        <button onClick={toggleTheme}>
          Змінити тему
        </button>

        <div style={{ marginTop: '16px' }}>
          <Suspense fallback={<p>Завантаження користувача...</p>}>
            <UserProfile />
          </Suspense>
        </div>
      </main>
    </ThemeContext.Provider>
  );
}

createRoot(document.getElementById('root')).render(<App />);

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then((response) => response.json())
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((requestError) => {
        setError(requestError);
        setIsLoading(false);
      });
  }, []);

  // Потрібно окремо обробити всі стани
}

function Component() {
  const promise = loadData();
  const data = use(promise);

  return <p>{data.name}</p>;
}

<Suspense fallback={<p>Завантаження...</p>}>
  <Component />
</Suspense>

<ThemeContext.Provider value={{ theme: 'dark' }}>
  <App />
</ThemeContext.Provider>