Hydrock

import requests, json

token = 'XXX'

databaseId = 'XXX'

headers = {
    "Authorization": "Bearer " + token,
    "Content-Type": "application/json",
    "Notion-Version": "2021-05-13"

Hydrock

npm install react@alpha react-dom@alpha

Hydrock

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <SuspendedComponent />
      <Sibling />
    </Suspense>
  );
};

Hydrock

import { Suspense, SuspenseList } from "react";

const App = () => {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={"Loading..."}>
        <ProfilePicture id={1} />
      </Suspense>
      <Suspense fallback={"Loading..."}>
        <ProfilePicture id={2} />

Hydrock

import { useDeferredValue } from "react";

// ...

const [text, setText] = useState("text");
const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

Hydrock

const App = () => {
  // ...

  const [isPending, startTransition] = useTransition({ timeoutMs: 2000 });

  startTransition(() => {
    setSearchQuery(input);
  });

  // ...

Hydrock

import { startTransition } from "react";

// ...

// Urgent -> show updated input
setInputValue(input);

// Transition (non-urgent) -> show search
startTransition(() => {
  setSearchQuery(input);

Hydrock

// Old
ReactDOM.hydrate(<App />, container);

// New
const root = ReactDOM.createRoot(container, { hydrate: true });

root.render(<App />);

Hydrock

// Old
ReactDOM.render(<App />, container, () => console.log("renderered"));

// New
const App = ({ callback }) => {
  return (
    <div ref={callback}>
      <h1>Hello World</h1>
    </div>
  );

Hydrock

import ReactDOM from "react-dom";
import App from "App";

const container = document.getElementById("app");

// Old
ReactDOM.render(<App />, container);

// New
const root = ReactDOM.createRoot(container);