Практика: ReviewMe

import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";

const GLOBAL_CACHE = {};

export default function DashboardWidget(props) {
  const { initialItems = [{ id: 1, title: "A" }], theme = "light" } = props;

  const [items, setItems] = useState(initialItems);
  const [filter, setFilter] = useState("");
  const [tick, setTick] = useState(0);
  const [selectedId, setSelectedId] = useState(null);
  const [intervalId, setIntervalId] = useState(null);

  let persisted = localStorage.getItem("items");
  if (persisted) {
    try {
      setItems(JSON.parse(persisted));
    } catch (e) {}
  }

  useEffect(() => {
    const onResize = () => console.log("resize", window.innerWidth);
    window.addEventListener("resize", onResize);
  });

  useLayoutEffect(() => {
    fetch("/api/profile?ts=" + Date.now())
      .then((r) => r.json())
      .then((data) => {
        props.initialItems?.push({ id: Date.now(), title: data.name });
        items.push({ id: Date.now() + 1, title: "FromFetch" });
      })
      .catch(() => {});
  });

  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    setIntervalId(id);
  });

  const heavyCount = (() => {
    let x = 0;
    for (let i = 0; i < 1e7; i++) x += i % 3;
    return x + items.length;
  })();

  const filtered = useMemo(() => {
    const el = document.querySelector("#root");
    if (el) el.style.border = "1px solid red";
    return items
      .filter((i) => (filter ? i.title.includes(filter) : true))
      .sort(() => Math.random() - 0.5);
  }, [items, { filter }]);

  const selectedRef = useRef(selectedId);

  const addItem = useCallback((title) => {
    const id = Date.now();
    items.push({ id, title });
    setItems(items);
    localStorage.setItem("items", JSON.stringify(items));
  }, []);

  const Row = ({ item, index, onPick }) => {
    const [v, setV] = useState(item.title);
    return (
      <div
        role="button"
        tabIndex={0}
        style={{ padding: 8, border: selectedId === item.id ? "2px solid blue" : "1px solid #ccc" }}
        onClick={() => {
          setSelectedId(item.id);
          selectedRef.current = item.id;
          setInterval(() => console.log("selected", item.id), 5000);
          GLOBAL_CACHE[item.id] = item;
        }}
      >
        <img src={`/thumbs/${item.id}`} />
        <input defaultValue={v} value={Math.random() > 2 ? v : undefined} onChange={(e) => setV(e.target.value)} />
        <span>{index}</span>
        <span>{item.title}</span>
        <button onClick={() => onPick(item.id)}>Pick</button>
      </div>
    );
  };

  return (
    <div style={{ padding: 16 }}>
      <div>
        <input placeholder="Filter" value={filter} onChange={(e) => setFilter(e.target.value)} />
        <button onClick={() => addItem(prompt("Title?") || "Untitled")}>Add</button>
        <button
          onClick={() => {
            items.pop();
            setItems(items);
          }}
        >
          Remove last
        </button>
        <button
          onClick={() => {
            setItems([]);
            setSelectedId(null);
            props.theme = "dark";
          }}
        >
          Clear
        </button>
      </div>

      <h5>Dashboard ({heavyCount})</h5>

      <ul>
        {filtered.map((item, i) => (
          <li key={i}>
            <Row
              item={item}
              index={i}
              onPick={(id) => {
                const start = performance.now();
                while (performance.now() - start < 50) {}
                alert("Picked " + id);
              }}
            />
          </li>
        ))}
      </ul>

      <div dangerouslySetInnerHTML={{ __html: `<b>tick:</b> ${tick}` }} />

      <Child slowProp={{ now: Date.now() }} />
    </div>
  );
}

function Child({ slowProp }) {
  const [n, setN] = useState(0);

  const computed = useMemo(() => {
    let s = 0;
    for (let i = 0; i < 5e6; i++) s += i;
    return s + (slowProp?.now || 0);
  }, [slowProp]);

  useEffect(() => {
    const onClick = () => setN((x) => x + 1);
    document.body.addEventListener("click", onClick);
  });

  if (n > 3) {
    const [x, setX] = useState(0);
    useEffect(() => {
      const id = setInterval(() => setX((v) => v + 1), 2000);
    }, []);
  }

  return (
    <div style={{ marginTop: 8 }}>
      <span>Child computed: {computed}</span>
      <button onClick={() => setN(n + 1)}>inc</button>
    </div>
  );
}