Рендеринг и reconciliation

Что заставляет React-компонент перерендериться?

Чем отличаются React-элемент, компонент и экземпляр компонента?

function Avatar({ name }: { name: string }) {  const [expanded, setExpanded] = useState(false);  return <button onClick={() => setExpanded(true)}>{expanded ? name : name[0]}</button>;} const element = <Avatar name="Ada" />;…

Чем отличаются фаза рендера и фаза коммита в React?

В каком порядке появятся эти логи при монтировании (без StrictMode) и почему?

function Child() {  console.log('Child render');  useLayoutEffect(() => console.log('Child layout effect'), []);  useEffect(() => console.log('Child effect'), []);  return <p>child</p>;} function Parent() {  console.log('Parent render');  useLayoutEffect(() => console.log('Parent layout effect'), []);  useEffect(() => console.log('Parent effect'), []);  return <Child />;}

Что такое reconciliation и какие эвристики использует React при сравнении двух деревьев элементов?

function Page({ isAdmin }: { isAdmin: boolean }) {  // same type at the same position: Panel keeps its state when isAdmin flips  return isAdmin ? <Panel title="Admin" /> : <Panel title="User" />;} function Card({ boxed }: { boxed: boolean }) {…

Сколько раз Expensive напишет в лог после трёх кликов по кнопке и почему?

function Expensive() {  console.log('Expensive render');  return <p>Heavy chart</p>;} function Counter({ children }: { children: React.ReactNode }) {  const [count, setCount] = useState(0);  return (    <div>      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>      {children}    </div>  );} export default function App() {  return <Counter><Expensive /></Counter>;}

Что произойдёт, если вызвать сеттер стейта во время рендера, и когда это допустимый приём?

function List({ items }: { items: Item[] }) {  const [selection, setSelection] = useState<Item | null>(null);  const [prevItems, setPrevItems] = useState(items);   if (items !== prevItems) {    // runs once per change; React re-runs List before rendering its children…

Что такое конкурентный рендеринг и что изменилось в React 18?

Чем рендер обновления внутри startTransition отличается от срочного обновления и что произойдёт, если пользователь печатает во время этого рендера?

function SearchPage() {  const [text, setText] = useState('');  const [query, setQuery] = useState('');  const [isPending, startTransition] = useTransition();   return (…

Что делает useDeferredValue и когда его стоит использовать вместо debounce?

const SlowList = memo(function SlowList({ query }: { query: string }) {  const items = filterHugeList(query); // expensive  return <ul>{items.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;}); function Search() {…

Что происходит внутри React, когда компонент приостанавливается (suspend), и что изменилось в React 19?

const Comments = lazy(() => import('./Comments')); function Post({ postPromise }: { postPromise: Promise<PostData> }) {  const post = use(postPromise); // suspends until resolved  return (    <article>…

Что такое гидратация и что добавляет выборочная гидратация (selective hydration) в React 18 и новее?

// entry: attach to the server HTML instead of creating new DOMhydrateRoot(document.getElementById('root')!, <App />); function LocalTime() {  // wrong: the server and the client format different times  // return <span>{new Date().toLocaleTimeString()}</span>;…

Что такое React Fiber и какую проблему он решил?

Как React согласует (reconcile) переупорядоченный список с ключами и какая перестановка для него самая дорогая?

Как React внутри планирует обновления и расставляет приоритеты: что такое lanes и time slicing?

Что такое сигналы в Solid, Preact или Angular, и почему React перерендеривает компоненты вместо точечных (fine-grained) обновлений?

type Effect = () => void;let running: Effect | null = null; function createSignal<T>(value: T) {  const subscribers = new Set<Effect>();  const read = () => {…

Почему навигация, обёрнутая в transition, оставляет на экране старую страницу вместо fallback у Suspense и как управлять тем, какие fallback-и появляются?

function App() {  const [page, setPage] = useState('/');  const [isPending, startTransition] = useTransition();   function navigate(url: string) {    // keeps the current page on screen while the next one loads…

Найдите баг: переключение вкладки обёрнуто в startTransition, но после await старая вкладка исчезает и мелькает fallback от Suspense.

function Tabs() {  const [tab, setTab] = useState<'about' | 'posts'>('about');  const [isPending, startTransition] = useTransition();   function selectTab(next: 'about' | 'posts') {    startTransition(async () => {      await saveLastTab(next);      setTab(next);    });  }   return (    <>      <TabBar active={tab} pending={isPending} onSelect={selectTab} />      <Suspense fallback={<Spinner />}>{tab === 'about' ? <About /> : <Posts />}</Suspense>    </>  );}

Что делает flushSync и когда он действительно нужен?

import { flushSync } from 'react-dom'; function Chat() {  const [messages, setMessages] = useState<Message[]>([]);  const listRef = useRef<HTMLUListElement>(null);…

Что происходит, когда компонент бросает ошибку во время рендера, и что такое onCaughtError, onUncaughtError и onRecoverableError в React 19?

import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')!, {  onCaughtError(error, errorInfo) {    report(error, { componentStack: errorInfo.componentStack, handled: true });  },…