Заметки про React

const Home = lazy(
  () => import(/* webpackChunkName: "home" */ "./pages/home-page"),
);

export const routeChunkMapping = {
  "/": "home",
  "/home": "home"
};

const [x, setX] = useState(0);
useEffect(() => {
 console.log(x);
}, []);

const [state, setState] = useState() / React.useState()
                       // ^^^ стабильная ссылка
const [state, dispatch] = useReducer() / React.useReducer()
                      // ^^^ стабильная ссылка
const [state, dispatch] = useActionState() / React.useActionState()
                      // ^^^ стабильная ссылка
const ref = useRef()
      // ^^^ стабильная ссылка
const onStuff = useEffectEvent(() => {})
      // ^^^ стабильная ссылка
Остальные ссылки не стабильны

export default function Home() {
  let searchParams = useSearchParams();
  let search = searchParams.get('search') ?? '';
  
  /* ... */

  return (
    <>
      {/* ... */}
      
      <Input
        value={search}
        onChange={(e) => {
          let search = e.target.value;
          
          if (search) {
            router.push(`${pathname}?search=${search}`);
          } else { 
             router.push(pathname); 
          }
        }}
        placeholder="Find someone..."
      />
    </>
  );
}

function Layout(props: { children: ReactNode }) {
  return (
    <Card>
      <CardHeading>Welcome 👋</CardHeading>
      <CardContent>{props.children}</CardContent>
    </Card>
  )
}

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  return (
    <Layout>
      {data?.assignee ? <UserInfo {...data.assignee} /> : null}
      {isPending ? <Skeleton /> : null}
      {!data && !isPending ? <EmptyScreen /> : null}
      {data
        ? data.content.map((item) => (
            <ShoppingItem key={item.id} {...item} />
          ))
        : null}
    </Layout>
  )
}

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  if (isPending) {
    return (
      <Layout>
        <Skeleton />
      </Layout>
    )
  }

  if (!data) {
    return (
      <Layout>
        <EmptyScreen />
      </Layout>
    )
  }

  return (
    <Layout>
      {data.assignee ? <UserInfo {...data.assignee} /> : null}
      {data.content.map((item) => (
        <ShoppingItem key={item.id} {...item} />
      ))}
    </Layout>
  )
}

import { ComponentType } from 'react'

type ProductTileProps = {
  title: string
  description?: string
}

type Props = {
  render: ComponentType<ProductTileProps>
}

function ProductTile({ render }: Props) {
  const props = {…}

  return render(props)
}

import { RefObject } from 'react'

type Props = {
  anchor: RefObject<HTMLElement>
}

function Popover({ anchor }: Props) {
  // position component according to the anchor ref
}

import { useForm } from '@tanstack/react-form';

export default function App() {
  const form = useForm({
    defaultValues: {
      firstName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
  });

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <div>
          <form.Field
            name="firstName"
            validators={{
              onChangeAsyncDebounceMs: 500,
              onChangeAsync: async ({ value }) => {
                await new Promise((resolve) => setTimeout(resolve, 1000));

                return (
                  value.includes('error') && 'No "error" allowed in first name'
                );
              },
            }}
            children={(field) => {
              return (
                <>
                  <label htmlFor={field.name}>First Name:</label>
                  <input
                    id={field.name}
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                </>
              );
            }}
          />
        </div>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        />
      </form>
    </div>
  );
}

.content .card {
  background: #f0f0f0;
}

.card:has(img) {
  border-top: 10px solid #fee6ec;
}

// Все карточки после карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) ~ .card,

// Все карточки перед карточкой с фокусом на кнопку «открытия»
.card:has(~ .card [data-action='open']:focus-visible) {
  filter: greyscale();
  background-color: #f6f7f6;
}

// Стиль карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) {
  transform: scale(1.02);
  border-top: 10px solid #c3dccf;
}

function onSubmit(event: React.FormEvent) {
  event.preventDefault()
  const formData = new FormData(event.target)

  const formValues = {
    name: formData.get('name')
    email: formData.get('email)
  }
}

const formValues = Object.fromEntries(formData)
console.log(formValues) { name: 'my name', email: 'name@someemail.com' }
typeof formValues // { [k: string]: FormDataEntryValue }

const formValues = Object.fromEntries(formData) // ❌ TYPE: { [k: string]: FormDataEntryValue }

const results = myFormSchema.safeParse(formValues)
if (results.success) {
  results.data // ✅ TYPE: { email: string, quantity: number }
  console.log(results.data.email) // name@someemail.com
  console.log(results.data.quantity) // 5
} else {
  // Обработка ошибки
}

function MyForm() {
  function formAction(formData: FormData) {
    // Получаем экземпляр formData вместо event
  }

  return <form action={formAction}>...</form>
}

function Card() {}

Card.Header = function Header() {}
Card.Body = function Body() {}
Card.Footer = function Footer() {}

export default Card;

export default Object.assign(Card, {
  Header,
  Body,
  Footer,
});

// card.tsx
export function CardRoot() {}
export function CardHeader() {}
export function CardBody() {}
export function CardFooter() {}

// namespaces.ts
export {
    CardBody as Body,
    CardRoot as Root,
    CardFooter as Footer,
    CardHeader as Header,
} from "./card";

// index.tsx
export * as Card from "./namespace";

// App.tsx
import { Card } from './src/ui/card';

// Card.Root, Card.Body и т.д.

import { Component as Arrow } from './icon.svg?svgUse';

return <Arrow color="red" />;

<svg viewBox="0 0 24 24">
  <use
    href="https://my-site.com/assets/icon-someHash.svg#use-href-target"
    style="--svg-use-href-color: red"
  ></use>
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="var(--svg-use-href-color, #111)"
  id="use-href-target"
>
  <line x1="5" y1="12" x2="19" y2="12"></line>
  <polyline points="12 5 19 12 12 19"></polyline>
</svg>

// getServerTime.ts
import { createServerFn } from '@tanstack/start'

export const getServerTime = createServerFn('GET', async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return new Date().toISOString()
})

// Time.tsx
import { useServerFn } from '@tanstack/start'
import { useQuery } from '@tanstack/react-query'
import { getServerTime } from './getServerTime'

export function Time() {
  const getTime = useServerFn(getServerTime)

  const timeQuery = useQuery({
    queryKey: 'time',
    queryFn: () => getTime(),
  })
}

'use client'

import { startTransition, useState } from 'react'
import { useRouter } from 'next/navigation'

export default function ErrorFallback({
  error,
  resetErrorBoundary,
}: {
  error: Error
  resetErrorBoundary: () => void
}) {
  const router = useRouter()

  // Стейт кнопки сброса
  const [isResetting, setIsResetting] = useState(false)

  function retry() {
    setIsResetting(true)

    startTransition(() => {
      router.refresh()
      resetErrorBoundary()
      setIsResetting(false)
    })
  }

  return (
    <button onClick={() => retry()}>
      {isResetting ? <Spinner /> : null}
      Retry
    </button>
  )
} 

const FetchedDataSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type FetchedData = z.infer<typeof FetchedDataSchema>;

function DataFetchingComponent() {
  const fetchData = async (): Promise<FetchedData> => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return FetchedDataSchema.parse(data);
  };

  /* --snip-- */
}

<p>There are 4 lights!</p> 

// После перевода: 

<p><font>Er zijn 4 lampen!</font></p>

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

import { useSyncExternalStore } from 'react';

export type Listener = () => void;

function createStore<T>({ initialState }: { initialState: T }) {
  let subscribers: Listener[] = [];
  let state = initialState;

  const notifyStateChanged = () => {
    subscribers.forEach((fn) => fn());
  };

  return {
    subscribe(fn: Listener) {
      subscribers.push(fn);
      return () => {
        subscribers = subscribers.filter((listener) => listener !== fn);
      };
    },
    getSnapshot() {
      return state;
    },
    setState(newState: T) {
      state = newState;
      notifyStateChanged();
    },
  };
}

export function createUseStore<T>(initialState: T) {
  const store = createStore({ initialState });
  return () => [useSyncExternalStore(store.subscribe, store.getSnapshot), store.setState] as const;
}

export const useCountStore = createUseStore(0);

function Counter() {
  const [count, setCount] = useCountStore();

  const increment = () => {
    setCount(count + 1);
  };

  /* --snip-- */
}

function JoinButton({ children }: { children: React.ReactNode }) {
    const { pending, data } = useFormStatus()

    return (
        <button type="submit">
            {pending ? `Joining as ${data.get('username')}...` : children}
        </button>
    )
}

function JoinEventForm() {
    /** --snip */
    return (
        <form action={joinEvent}>
            <JoinButton>Join</JoinButton>
        </form>
    )
}

async function joinEvent(
    previousState: { joined: boolean },
    formData: FormData,
) {
    /** --snip */ 

    return { joined: true }
}

function JoinEventForm() {
    const [state, formAction, isPending] = useActionState(
        joinEvent,
        { joined: false },
        JOIN_URL,
    )

    return (
        <div>
            {state.joined ? (
                <p>See you there!</p>
            ) : (
                <form action={formAction}>
                    <button type="submit">
                        {isPending ? 'Joining...' : 'Join'}
                    </button>
                </form>
            )}
        </div>
    )
}

import DOMPurify from 'dompurify';

const comment = '<script>alert("XSS Attack!")</script>Great article!';

const UserComments = () => {
  return (
    <div>
      <li dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />
    </div>
  );
}; 

header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://maps.googleapis.com https://www.googletagmanager.com;" 

function CSRFProtectedForm() {
  const [csrfToken, setCsrfToken] = useState('');

  {/* Запрос CSRF токена */}

  return (
    <form onSubmit={submitForm}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* --snip-- */}
      <button type="submit">Submit</button>
    </form>
  );
}

return !numberIncorrect ? (
    // A lot of JSX...
) : (
    // Even more JSX...
)

<head>
    <script>
        // Упрощенная версия, чтобы показать как высокоуровнево работает загрузка 
        window.__userDataPromise = (async function () {
            const user = await (await fetch("/api/user")).json();
            const userPreferences = await (await fetch(`/api/user-preferences/${user.id}`)).json();
            return { user, userPreferences };
        })();
    </script>
</head>

function MyApp() {
  const [userData, setUserData] = useState();
 
  async function loadUserData() {
    setUserData(await window.__userDataPromise);
  }
 
  useEffect(() => {
    loadUserData();
  }, []);
}