diff --git a/content/ru/guide/v10/api-reference.md b/content/ru/guide/v10/api-reference.md
index 1f8e04688..924927a95 100644
--- a/content/ru/guide/v10/api-reference.md
+++ b/content/ru/guide/v10/api-reference.md
@@ -201,7 +201,7 @@ render(
 
 Предоставляет способ ссылки на элемент или компонент после его визуализации.
 
-Дополнительную информацию см. в [документации по ссылкам](/guide/v10/refs#createref).
+Дополнительную информацию см. в [документации по рефам](/guide/v10/refs#создание-рефа).
 
 ## Fragment
 
diff --git a/content/ru/guide/v10/context.md b/content/ru/guide/v10/context.md
index e60bbad12..da18e7726 100644
--- a/content/ru/guide/v10/context.md
+++ b/content/ru/guide/v10/context.md
@@ -1,13 +1,15 @@
 ---
 name: Контекст
-description: 'Контекст позволяет передавать параметры через промежуточные компоненты. В этом документе описывается как новый, так и старый API'
+description: 'Контекст позволяет передавать параметры через промежуточные компоненты. В этой документации описывается как новый, так и старый API'
 ---
 
 # Контекст
 
-Контекст позволяет передавать значение дочернему компоненту в глубине дерева, не пропуская его через все последующие компоненты с помощью `props`. Очень популярным вариантом такого использования является тематическое оформление. В двух словах контекст можно представить как способ выполнения обновлений в стиле `pub-sub` в Preact.
+Контекст — это способ передачи данных через дерево компонентов без необходимости передавать их через каждый промежуточный компонент с помощью пропсов. Проще говоря, он позволяет компонентам в любой части иерархии подписываться на значение и получать уведомления о его изменениях, обеспечивая обновления в стиле pub-sub для Preact.
 
-Существует два различных способа использования контекста: Через новый API `createContext` и старый API контекста. Разница между ними заключается в том, что старый вариант не может обновить дочерний компонент, когда компонент между ними прерывает рендеринг через `shouldComponentUpdate`. Поэтому мы настоятельно рекомендуем всегда использовать `createContext`.
+Не редкость сталкиваться с ситуациями, когда значение из компонента-прародителя (или выше) нужно передать дочернему компоненту, часто без необходимости в промежуточном компоненте. Этот процесс передачи пропсов часто называют «проп-дриллингом», и он может быть громоздким, подверженным ошибкам и просто утомительным, особенно по мере роста приложения и необходимости передавать больше значений через большее количество слоёв. Это одна из ключевых проблем, которую контекст стремится решить, предоставляя способ для дочернего компонента подписаться на значение, находящееся выше в дереве компонентов, получая доступ к значению без его передачи в качестве пропса.
+
+В Preact есть два способа использования контекста: через новый API `createContext` и устаревший context API. В настоящее время существует очень мало причин использовать устаревший API, но он документирован здесь для полноты.
 
 ---
 
@@ -15,64 +17,168 @@ description: 'Контекст позволяет передавать пара
 
 ---
 
-## createContext
+## Современный Context API
+
+### Создание контекста
+
+Чтобы создать новый контекст, мы используем функцию `createContext`. Эта функция принимает начальное состояние в качестве аргумента и возвращает объект с двумя свойствами компонентов: `Provider`, чтобы сделать контекст доступным для потомков, и `Consumer`, чтобы получить доступ к значению контекста (в основном в классовых компонентах).
+
+```jsx
+import { createContext } from "preact";
+
+export const Theme = createContext("light");
+export const User = createContext({ name: "Guest" });
+export const Locale = createContext(null);
+```
+
+### Настройка провайдера
+
+После того как мы создали контекст, мы должны сделать его доступным для потомков, используя компонент `Provider`. Провайдеру необходимо передать пропс `value`, представляющий начальное значение контекста.
+
+> Начальное значение, установленное с помощью `createContext`, используется только в отсутствие `Provider` выше потребителя в дереве. Это может быть полезно для тестирования компонентов в изоляции, так как позволяет избежать необходимости создания обёртки `Provider` вокруг вашего компонента.
+
+```jsx
+import { createContext } from "preact";
+
+export const Theme = createContext("light");
+
+function App() {
+  return (
+    <Theme.Provider value="dark">
+      <SomeComponent />
+    </Theme.Provider>
+  );
+}
+```
+
+> **Совет:** Вы можете иметь несколько провайдеров одного и того же контекста в вашем приложении, но будет использоваться только ближайший к потребителю.
+
+### Использование контекста
 
-Сначала нам необходимо создать объект контекста, который мы сможем передавать по кругу. Это делается с помощью функции `createContext(initialValue)`. Он возвращает компонент `Provider`, который используется для установки значения контекста, и компонент `Consumer`, который извлекает значение из контекста.
+Существует два способа потребления контекста, в значительной степени в зависимости от предпочитаемого вами стиля компонентов: `Consumer` (классовые компоненты) и хук `useContext` (функциональные компоненты/хуки).
 
-Аргумент `initialValue` используется только в том случае, если у контекста нет соответствующего `Provider` над ним в дереве. Это может быть полезно для изолированного тестирования компонентов, поскольку позволяет избежать необходимости создания оборачивающего `Provider`.
+<tab-group tabstring="Consumer, useContext">
 
 ```jsx
 // --repl
-import { render, createContext } from 'preact';
+import { render, createContext } from "preact";
 
-const SomeComponent = (props) => props.children;
+const SomeComponent = props => props.children;
 // --repl-before
-const Theme = createContext('light');
+const ThemePrimary = createContext("#673ab8");
 
-function ThemedButton(props) {
+function ThemedButton() {
   return (
-    <Theme.Consumer>
-      {(theme) => {
-        return (
-          <button {...props} class={'btn ' + theme}>
-            Переключить тему
-          </button>
-        );
-      }}
-    </Theme.Consumer>
+    <ThemePrimary.Consumer>
+      {theme => <button style={{ background: theme }}>Переключить тему</button>}
+    </ThemePrimary.Consumer>
   );
 }
 
 function App() {
   return (
-    <Theme.Provider value='dark'>
+    <ThemePrimary.Provider value="#8f61e1">
       <SomeComponent>
         <ThemedButton />
       </SomeComponent>
-    </Theme.Provider>
+    </ThemePrimary.Provider>
+  );
+}
+// --repl-after
+render(<App />, document.getElementById("app"));
+```
+
+```jsx
+// --repl
+import { render, createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+const SomeComponent = props => props.children;
+// --repl-before
+const ThemePrimary = createContext("#673ab8");
+
+function ThemedButton() {
+  const theme = useContext(ThemePrimary);
+  return <button style={{ background: theme }}>Переключить тему</button>;
+}
+
+function App() {
+  return (
+    <ThemePrimary.Provider value="#8f61e1">
+      <SomeComponent>
+        <ThemedButton />
+      </SomeComponent>
+    </ThemePrimary.Provider>
+  );
+}
+// --repl-after
+render(<App />, document.getElementById("app"));
+```
+
+</tab-group>
+
+### Обновление контекста
+
+Статические значения могут быть полезны, но чаще всего мы хотим иметь возможность динамически обновлять значение контекста. Для этого мы используем стандартные механизмы состояния компонентов:
+
+```jsx
+// --repl
+import { render, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
+
+const SomeComponent = props => props.children;
+// --repl-before
+const ThemePrimary = createContext(null);
+
+function ThemedButton() {
+  const { theme } = useContext(ThemePrimary);
+  return <button style={{ background: theme }}>Переключить тему</button>;
+}
+
+function ThemePicker() {
+  const { theme, setTheme } = useContext(ThemePrimary);
+  return (
+    <input
+      type="color"
+      value={theme}
+      onChange={e => setTheme(e.currentTarget.value)}
+    />
+  );
+}
+
+function App() {
+  const [theme, setTheme] = useState("#673ab8");
+  return (
+    <ThemePrimary.Provider value={{ theme, setTheme }}>
+      <SomeComponent>
+        <ThemedButton />
+        {" - "}
+        <ThemePicker />
+      </SomeComponent>
+    </ThemePrimary.Provider>
   );
 }
 // --repl-after
-render(<App />, document.getElementById('app'));
+render(<App />, document.getElementById("app"));
 ```
 
-> Более простой способ использовать контекст — использовать хук [useContext](/guide/v10/hooks#usecontext).
+## Устаревший Context API
 
-## Устаревший API контекста
+Этот API считается устаревшим и должен быть избегаем в новом коде, так как у него есть известные проблемы, и он существует только для обеспечения обратной совместимости.
 
-Мы включаем устаревший API в основном из соображений обратной совместимости. Он был заменен API `createContext`. У устаревшего API есть известные проблемы, такие как блокировка обновлений, если между ними есть компоненты, которые возвращают false в `shouldComponentUpdate`. Если вам всё же нужно его использовать, продолжайте читать.
+Одно из ключевых отличий этого API от нового заключается в том, что этот API не может обновить дочерний компонент, когда компонент между дочерним компонентом и провайдером отменяет рендеринг с помощью `shouldComponentUpdate`. Когда это происходит, дочерний компонент **не получит** обновлённое значение контекста, что часто приводит к разрыву (часть интерфейса использует новое значение, а часть — старое).
 
-Чтобы передать пользовательскую переменную через контекст, компонент должен иметь метод `getChildContext`. Там вы возвращаете новые значения, которые хотите сохранить в контексте. Доступ к контексту можно получить через второй аргумент в функциональных компонентах или через `this.context` в компоненте на основе класса.
+Чтобы передать значение через контекст, компонент должен иметь метод `getChildContext`, возвращающий предполагаемое значение контекста. Потомки могут получить доступ к контексту через второй аргумент в функциональных компонентах или `this.context` в классовых компонентах.
 
 ```jsx
 // --repl
-import { render } from 'preact';
+import { render } from "preact";
 
-const SomeOtherComponent = (props) => props.children;
+const SomeOtherComponent = props => props.children;
 // --repl-before
-function ThemedButton(props, context) {
+function ThemedButton(_props, context) {
   return (
-    <button {...props} class={'btn ' + context.theme}>
+    <button style={{ background: context.theme }}>
       Переключить тему
     </button>
   );
@@ -81,8 +187,8 @@ function ThemedButton(props, context) {
 class App extends Component {
   getChildContext() {
     return {
-      theme: 'light',
-    };
+      theme: "#673ab8"
+    }
   }
 
   render() {
@@ -96,5 +202,5 @@ class App extends Component {
   }
 }
 // --repl-after
-render(<App />, document.getElementById('app'));
+render(<App />, document.getElementById("app"));
 ```
diff --git a/content/ru/guide/v10/differences-to-react.md b/content/ru/guide/v10/differences-to-react.md
index a4110a72d..6350e71ae 100644
--- a/content/ru/guide/v10/differences-to-react.md
+++ b/content/ru/guide/v10/differences-to-react.md
@@ -33,7 +33,7 @@ Preact не претендует на то, чтобы быть повторно
 
 Как для preact, так и для [preact/compat] совместимость версий измеряется по отношению к _текущим_ и _предыдущим_ основным выпускам React. Когда команда React анонсирует новые функции, они могут быть добавлены в ядро ​​Preact, если это имеет смысл с учетом [целей проекта][Project Goals]. Это довольно демократичный процесс, постоянно развивающийся посредством дискуссий и решений, принимаемых открыто, с использованием вопросов и запросов на включение.
 
-> Таким образом, веб-сайт и документация отражают React от «15.x» до «17.x» при обсуждении совместимости или сравнении.
+> Таким образом, сайт и документация отражают версии React с `15.x` по `17.x`, с некоторыми дополнениями из `18.x` и `19.x`, когда речь идет о совместимости или сравнении.
 
 ## Отладочные сообщения и ошибки
 
diff --git a/content/ru/guide/v10/forms.md b/content/ru/guide/v10/forms.md
index 70daa3f8a..2b4a02920 100644
--- a/content/ru/guide/v10/forms.md
+++ b/content/ru/guide/v10/forms.md
@@ -1,13 +1,11 @@
 ---
 name: Формы
-description: 'Как создавать потрясающие формы в Preact, которые работают где угодно.'
+description: 'Формы и элементы управления формами позволяют собирать вводимые пользователем данные в вашем приложении и являются основным строительным блоком большинства веб-приложений.'
 ---
 
 # Формы
 
-Формы в Preact работают почти так же, как и в HTML. Вы визуализируете элемент управления и прикрепляете к нему прослушиватель событий.
-
-Основное отличие заключается в том, что в большинстве случаев `значением` (`value`) управляет не узел DOM, а Preact.
+Формы в Preact работают так же, как и в HTML и JavaScript: вы отображаете элементы управления, прикрепляете обработчики событий и отправляете информацию.
 
 ---
 
@@ -15,159 +13,404 @@ description: 'Как создавать потрясающие формы в Pre
 
 ---
 
-## Контролируемые и неконтролируемые компоненты
+## Основные элементы управления формами
+
+Часто вам потребуется собирать вводимые пользователем данные в вашем приложении, и здесь на помощь приходят элементы `<input>`, `<textarea>` и `<select>`. Эти элементы являются общими строительными блоками форм в HTML и Preact.
 
-Говоря об элементах управления формы, часто можно встретить слова «контролируемый компонент» и «неконтролируемый компонент». Описание относится к тому, как обрабатывается поток данных.
+### Ввод (текст)
 
-DOM имеет двунаправленный поток данных, поскольку каждый элемент управления формой будет сам управлять вводом данных пользователем. Простой текстовый ввод всегда будет обновлять свое значение, когда пользователь введет в него текст. Напротив, такая среда, как Preact, обычно имеет однонаправленный поток данных; компонент там управляет не самим значением, а чем-то другим, расположенным выше в дереве компонентов.
+Для начала мы создадим простое текстовое поле ввода, которое будет обновлять значение состояния по мере ввода текста пользователем. Мы будем использовать событие `onInput`, чтобы отслеживать изменения значения поля ввода и обновлять состояние при каждом нажатии клавиши. Это значение состояния затем будет отображаться в элементе `<p>`, чтобы мы могли видеть результаты.
 
-Как правило, вам следует стараться использовать _неконтролируемые_ компоненты, когда это возможно, DOM полностью способен обрабатывать состояние `<input>`:
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
-// Неконтролируемый, так как Preact не устанавливает значение
-<input onInput={myEventHandler} />;
-```
+// --repl
+import { render, Component } from "preact";
+// --repl-before
+class BasicInput extends Component {
+  state = { name: '' };
 
-Однако бывают ситуации, когда вам может потребоваться более жёсткий контроль над входным значением, и в этом случае можно использовать _контролируемые_ компоненты.
+  onInput = e => this.setState({ name: e.currentTarget.value });
 
-Чтобы использовать контролируемые компоненты в Preact, вам нужно будет использовать [`refs`](/guide/v10/refs), чтобы преодолеть естественный разрыв между состоянием DOM и состоянием VDOM/Preact. Вот пример того, как вы можете использовать управляемый компонент для ограничения количества символов в поле ввода:
+  render(_, { name }) {
+    return (
+      <div class="form-example">
+        <label>
+          Имя: {' '}
+          <input onInput={this.onInput} />
+        </label>
+        <p>Привет, {name}</p>
+      </div>
+    );
+  }
+}
+// --repl-after
+render(<BasicInput />, document.getElementById("app"));
+```
 
 ```jsx
 // --repl
 import { render } from "preact";
-import { useState, useRef } from "preact/hooks";
+import { useState } from "preact/hooks";
 // --repl-before
-const Input = () => {
-  const [value, setValue] = useState('')
-  const inputRef = useRef()
-
-  const onInput = (e) => {
-    if (e.currentTarget.value.length <= 3) {
-      setValue(e.currentTarget.value)
-    } else {
-      const start = inputRef.current.selectionStart
-      const end = inputRef.current.selectionEnd
-      const diffLength = Math.abs(e.currentTarget.value.length - value.length)
-      inputRef.current.value = value
-      // Восстанавливаем выделение
-      inputRef.current.setSelectionRange(start - diffLength, end - diffLength)
-    }
-  }
+function BasicInput() {
+  const [name, setName] = useState('');
 
   return (
-  <>
-    <label>Этот ввод ограничен 3 символами: </label>
-    <input ref={inputRef} value={value} onInput={onInput} />
-  </>
+    <div class="form-example">
+      <label>
+        Имя: {' '}
+        <input onInput={(e) => setName(e.currentTarget.value)} />
+      </label>
+      <p>Привет, {name}</p>
+    </div>
   );
 }
 // --repl-after
-render(<Input />, document.getElementById("app"));
+render(<BasicInput />, document.getElementById("app"));
 ```
 
-> Дополнительную информацию об управляемых компонентах в Preact см. в статье [Контролируемые элементы ввода](https://www.jovidecroock.com/blog/control-inputs) Джови Де Крука.
+</tab-group>
 
-## Создание простой формы
+### Ввод (флажки и переключатели)
 
-Создадим простую форму для отправки элементов todo. Для этого мы создаем элемент `<form>` и привязываем обработчик событий, который будет вызываться каждый раз, когда форма будет отправлена. Аналогичным образом мы поступаем и с полем ввода текста, но обратите внимание, что мы сами храним значение в нашем классе. Вы угадали, здесь мы используем _управляемый_ вход. В данном примере это очень полезно, поскольку нам необходимо отобразить значение input в другом элементе.
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
 // --repl
-import { render, Component } from 'preact';
+import { render, Component } from "preact";
 // --repl-before
-class TodoForm extends Component {
-  state = { value: '' };
-
-  onSubmit = (e) => {
-    alert('Задача отправлена');
-    e.preventDefault();
+class BasicRadioButton extends Component {
+  state = {
+    allowContact: false,
+    contactMethod: ''
   };
 
-  onInput = (e) => {
-    this.setState({ e.currentTarget.value });
-  };
+  toggleContact = () => this.setState({ allowContact: !this.state.allowContact });
+  setRadioValue = e => this.setState({ contactMethod: e.currentTarget.value });
 
-  render(_, { value }) {
+  render(_, { allowContact }) {
     return (
-      <form onSubmit={this.onSubmit}>
-        <input type='text' value={value} onInput={this.onInput} />
-        <p>Вы ввели это значение: {value}</p>
-        <button type='submit'>Отправить</button>
-      </form>
+      <div class="form-example">
+        <label>
+          Разрешить контакт: {' '}
+          <input type="checkbox" onClick={this.toggleContact} />
+        </label>
+        <label>
+          Телефон: {' '}
+          <input type="radio" name="contact" value="phone" onClick={this.setRadioValue} disabled={!allowContact} />
+        </label>
+        <label>
+          Имейл: {' '}
+          <input type="radio" name="contact" value="email" onClick={this.setRadioValue} disabled={!allowContact} />
+        </label>
+        <label>
+          Обычная почта: {' '}
+          <input type="radio" name="contact" value="mail" onClick={this.setRadioValue} disabled={!allowContact} />
+        </label>
+        <p>
+          Вы {allowContact ? 'разрешили' : 'не разрешили'} контакт с {allowContact && ` через ${this.state.contactMethod}`}
+        </p>
+      </div>
     );
   }
 }
 // --repl-after
-render(<TodoForm />, document.getElementById('app'));
+render(<BasicRadioButton />, document.getElementById("app"));
 ```
 
-## Элемент выбора
+```jsx
+// --repl
+import { render } from "preact";
+import { useState } from "preact/hooks";
+// --repl-before
+function BasicRadioButton() {
+  const [allowContact, setAllowContact] = useState(false);
+  const [contactMethod, setContactMethod] = useState('');
 
-Элемент `<select>` немного сложнее, но работает так же, как и все остальные элементы управления формы:
+  const toggleContact = () => setAllowContact(!allowContact);
+  const setRadioValue = (e) => setContactMethod(e.currentTarget.value);
+
+  return (
+    <div class="form-example">
+      <label>
+        Разрешить контакт: {' '}
+        <input type="checkbox" onClick={toggleContact} />
+      </label>
+      <label>
+        Телефон: {' '}
+        <input type="radio" name="contact" value="phone" onClick={setRadioValue} disabled={!allowContact} />
+      </label>
+      <label>
+        Имейл: {' '}
+        <input type="radio" name="contact" value="email" onClick={setRadioValue} disabled={!allowContact} />
+      </label>
+      <label>
+        Обычная почта: {' '}
+        <input type="radio" name="contact" value="mail" onClick={setRadioValue} disabled={!allowContact} />
+      </label>
+      <p>
+        Вы {allowContact ? 'разрешили' : 'не разрешили'} контакт с {allowContact && ` через ${contactMethod}`}
+      </p>
+    </div>
+  );
+}
+// --repl-after
+render(<BasicRadioButton />, document.getElementById("app"));
+```
+
+</tab-group>
+
+### Выбор
+
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
 // --repl
-import { render, Component } from 'preact';
-
+import { render, Component } from "preact";
 // --repl-before
 class MySelect extends Component {
   state = { value: '' };
 
-  onChange = (e) => {
+  onChange = e => {
     this.setState({ value: e.currentTarget.value });
-  };
-
-  onSubmit = (e) => {
-    alert('Отправлено ' + this.state.value);
-    e.preventDefault();
-  };
+  }
 
   render(_, { value }) {
     return (
-      <form onSubmit={this.onSubmit}>
-        <select value={value} onChange={this.onChange}>
-          <option value='A'>A</option>
-          <option value='B'>B</option>
-          <option value='C'>C</option>
+      <div class="form-example">
+        <select onChange={this.onChange}>
+          <option value="A">A</option>
+          <option value="B">B</option>
+          <option value="C">C</option>
         </select>
-        <button type='submit'>Отправить</button>
-      </form>
+        <p>Вы выбрали: {value}</p>
+      </div>
     );
   }
 }
 // --repl-after
-render(<MySelect />, document.getElementById('app'));
+render(<MySelect />, document.getElementById("app"));
 ```
 
-## Флажки и радиокнопки
+```jsx
+// --repl
+import { render } from "preact";
+import { useState } from "preact/hooks";
+// --repl-before
+function MySelect() {
+  const [value, setValue] = useState('');
+
+  return (
+    <div class="form-example">
+      <select onChange={(e) => setValue(e.currentTarget.value)}>
+        <option value="A">A</option>
+        <option value="B">B</option>
+        <option value="C">C</option>
+      </select>
+      <p>Вы выбрали: {value}</p>
+    </form>
+  );
+}
+// --repl-after
+render(<MySelect />, document.getElementById("app"));
+```
 
-Флажки и радиокнопки (`<input type="checkbox|radio">`) поначалу могут вызывать путаницу при построении управляемых форм. Это связано с тем, что в неконтролируемой среде мы обычно позволяем браузеру «переключать» или «проверять» флажок или радиокнопку, прослушивая событие изменения и реагируя на новое значение. Однако эта техника плохо переходит в картину мира, где пользовательский интерфейс всегда обновляется автоматически в ответ на изменения состояния и параметров.
+</tab-group>
 
-> **Объяснение:** Допустим, мы прослушиваем событие `change` флажка, которое срабатывает, когда флажок устанавливается или снимается пользователем. В нашем обработчике событий изменения мы устанавливаем значение в `state`, равное новому значению, полученному от флажка. Это приведет к повторному рендерингу нашего компонента, который переназначит значение флажка значению из состояния. В этом нет необходимости, потому что мы просто запросили у DOM значение, а затем приказали ему выполнить повторную визуализацию с любым значением, которое мы хотим.
+## Простые формы
 
-Таким образом, вместо того, чтобы прослушивать событие `input`, мы должны прослушивать событие `click`, которое запускается каждый раз, когда пользователь нажимает на флажок _или связанный с ним элемент `<label>`_. Флажки просто переключаются между логическими значениями `true` и `false`, поэтому, кликая на флажке или метке, мы просто инвертируем любое значение, которое у нас есть в состоянии, запуская повторный рендеринг и устанавливая отображаемое значение флажка на то, которое мы хотим.
+Хотя простые поля ввода полезны и с их помощью можно добиться многого, часто мы видим, как наши поля ввода превращаются в _формы_, способные группировать несколько элементов управления вместе. Чтобы управлять этим, мы обращаемся к элементу `<form>`.
 
-### Пример флажка
+Для демонстрации создадим новый элемент `<form>`, который будет содержать два поля `<input>`: одно для имени пользователя и одно для фамилии. Мы будем использовать событие `onSubmit`, чтобы отслеживать отправку формы и обновлять состояние с полным именем пользователя.
+
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
 // --repl
-import { render, Component } from 'preact';
+import { render, Component } from "preact";
 // --repl-before
-class MyForm extends Component {
-  toggle = (e) => {
-    let checked = !this.state.checked;
-    this.setState({ checked });
+class FullNameForm extends Component {
+  state = { fullName: '' };
+
+  onSubmit = e => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    this.setState({
+      fullName: formData.get("firstName") + " " + formData.get("lastName")
+    });
+    e.currentTarget.reset(); // Очищаем поля ввода, чтобы подготовиться к следующей отправке
+  }
+
+  render(_, { fullName }) {
+    return (
+      <div class="form-example">
+        <form onSubmit={this.onSubmit}>
+          <label>
+            Имя: {' '}
+            <input name="firstName" />
+          </label>
+          <label>
+            Фамилия: {' '}
+            <input name="lastName" />
+          </label>
+          <button>Отправить</button>
+        </form>
+        {fullName && <p>Привет, {fullName}</p>}
+      </div>
+    );
+  }
+}
+// --repl-after
+render(<FullNameForm />, document.getElementById("app"));
+```
+
+```jsx
+// --repl
+import { render } from "preact";
+import { useState } from "preact/hooks";
+// --repl-before
+function FullNameForm() {
+  const [fullName, setFullName] = useState("");
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    setFullName(formData.get("firstName") + " " + formData.get("lastName"));
+    e.currentTarget.reset(); // Очищаем поля ввода, чтобы подготовиться к следующей отправке
   };
 
-  render(_, { checked }) {
+  return (
+    <div class="form-example">
+      <form onSubmit={onSubmit}>
+        <label>
+          Имя: {' '}
+          <input name="firstName" />
+        </label>
+        <label>
+          Фамилия: {' '}
+          <input name="lastName" />
+        </label>
+        <button>Отправить</button>
+      </form>
+      {fullName && <p>Привет, {fullName}</p>}
+    </div>
+  );
+}
+
+// --repl-after
+render(<FullNameForm />, document.getElementById("app"));
+```
+
+</tab-group>
+
+> **Примечание**: Хотя довольно часто можно встретить формы в React и Preact, которые связывают каждое поле ввода с состоянием компонента, это часто излишне и может усложнить код. В качестве очень общего правила, вы должны предпочитать использование `onSubmit` и API [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) в большинстве случаев, используя состояние компонента только тогда, когда это необходимо. Это снижает сложность ваших компонентов и может избежать ненужных повторных рендеров.
+
+## Контролируемые и неконтролируемые компоненты
+
+Когда речь идет об элементах управления формами, вы можете столкнуться с терминами «контролируемый компонент» и «неконтролируемый компонент». Эти термины относятся к тому, контролируется ли значение элемента управления формой явно компонентом. В общем, вы должны стараться использовать _неконтролируемые_ компоненты, когда это возможно, так как DOM полностью способен обрабатывать состояние `<input>`.
+
+```jsx
+// Неконтролируемый, потому что Preact не устанавливает значение
+<input onInput={myEventHandler} />;
+```
+
+Однако есть ситуации, в которых вам может понадобиться более строгий контроль над значением ввода, в таком случае можно использовать _контролируемые_ компоненты.
+
+```jsx
+// Контролируемый, потому что Preact устанавливает значение
+<input value={myValue} onInput={myEventHandler} />;
+```
+
+У Preact есть известная проблема с контролируемыми компонентами: для того чтобы Preact мог контролировать значения ввода, необходимы повторные рендеры. Это означает, что если ваш обработчик событий не обновляет состояние или не вызывает повторный рендер каким-либо образом, значение ввода не будет контролироваться и иногда может выйти из синхронизации с состоянием компонента.
+
+Пример одной из таких проблемных ситуаций выглядит следующим образом: предположим, у вас есть поле ввода, которое должно быть ограничено 3 символами. У вас может быть обработчик событий, подобный следующему:
+
+```js
+const onInput = (e) => {
+  if (e.currentTarget.value.length <= 3) {
+    setValue(e.currentTarget.value);
+  }
+}
+```
+
+Проблема заключается в случаях, когда ввод не соответствует этому условию: поскольку мы не вызываем `setValue`, компонент не перерисовывается, и, поскольку компонент не перерисовывается, значение ввода не контролируется должным образом. Однако даже если бы мы добавили `else { setValue(value) }` в этот обработчик, Preact достаточно умён, чтобы обнаружить, когда значение не изменилось, и поэтому он не перерисует компонент. Это оставляет нам [`refs`](/guide/v10/refs) для мостика между состоянием DOM и состоянием Preact.
+
+> Для получения дополнительной информации об управляемых компонентах в Preact смотрите статью [Controlled Inputs](https://www.jovidecroock.com/blog/controlled-inputs) от Jovi De Croock.
+
+Вот пример того, как вы можете использовать контролируемый компонент, чтобы ограничить количество символов в поле ввода:
+
+<tab-group tabstring="Classes, Hooks">
+
+```jsx
+// --repl
+import { render, Component, createRef } from "preact";
+// --repl-before
+class LimitedInput extends Component {
+  state = { value: '' }
+  inputRef = createRef(null)
+
+  onInput = (e) => {
+    if (e.currentTarget.value.length <= 3) {
+      this.setState({ value: e.currentTarget.value });
+    } else {
+      const start = this.inputRef.current.selectionStart;
+      const end = this.inputRef.current.selectionEnd;
+      const diffLength = Math.abs(e.currentTarget.value.length - this.state.value.length);
+      this.inputRef.current.value = this.state.value;
+      // Восстанавливаем выделение
+      this.inputRef.current.setSelectionRange(start - diffLength, end - diffLength);
+    }
+  }
+
+  render(_, { value }) {
     return (
-      <label>
-        <input type='checkbox' checked={checked} onClick={this.toggle} />
-        установите флажок
-      </label>
+      <div class="form-example">
+        <label>
+          Это поле ввода ограничено 3 символами: {' '}
+          <input ref={this.inputRef} value={value} onInput={this.onInput} />
+        </label>
+      </div>
     );
   }
 }
 // --repl-after
-render(<MyForm />, document.getElementById('app'));
+render(<LimitedInput />, document.getElementById("app"));
+```
+
+```jsx
+// --repl
+import { render } from "preact";
+import { useState, useRef } from "preact/hooks";
+// --repl-before
+const LimitedInput = () => {
+  const [value, setValue] = useState('');
+  const inputRef = useRef();
+
+  const onInput = (e) => {
+    if (e.currentTarget.value.length <= 3) {
+      setValue(e.currentTarget.value);
+    } else {
+      const start = inputRef.current.selectionStart;
+      const end = inputRef.current.selectionEnd;
+      const diffLength = Math.abs(e.currentTarget.value.length - value.length);
+      inputRef.current.value = value;
+      // Восстанавливаем выделение
+      inputRef.current.setSelectionRange(start - diffLength, end - diffLength);
+    }
+  }
+
+  return (
+    <div class="form-example">
+      <label>
+        Это поле ввода ограничено 3 символами: {' '}
+        <input ref={inputRef} value={value} onInput={onInput} />
+      </label>
+    </div>
+  );
+}
+// --repl-after
+render(<LimitedInput />, document.getElementById("app"));
 ```
+
+</tab-group>
diff --git a/content/ru/guide/v10/hooks.md b/content/ru/guide/v10/hooks.md
index d4d04d227..884c7bd6b 100644
--- a/content/ru/guide/v10/hooks.md
+++ b/content/ru/guide/v10/hooks.md
@@ -5,9 +5,9 @@ description: 'Хуки в Preact позволяют комбинировать 
 
 # Хуки
 
-API хуков — это новая концепция, позволяющая компоновать состояние и побочные эффекты. Хуки позволяют повторно использовать логику с сохранением состояния между компонентами.
+Hooks API — это новая концепция, позволяющая компоновать состояние и побочные эффекты. Хуки позволяют повторно использовать логику с сохранением состояния между компонентами.
 
-Если вы давно работаете с Preact, то, возможно, знакомы с такими шаблонами, как «параметры рендера» и «компоненты более высокого порядка», которые пытаются решить эти задачи. Эти решения, как правило, делают код более сложным для понимания и более абстрактным. API хуков позволяет аккуратно извлекать логику состояния и побочных эффектов, а также упрощает модульное тестирование этой логики независимо от компонентов, которые на нее опираются.
+Если вы давно работаете с Preact, то, возможно, знакомы с такими шаблонами, как «параметры рендера» и «компоненты более высокого порядка», которые пытаются решить эти задачи. Эти решения, как правило, делают код более сложным для понимания и более абстрактным. Hooks API позволяет аккуратно извлекать логику состояния и побочных эффектов, а также упрощает модульное тестирование этой логики независимо от компонентов, которые на нее опираются.
 
 Хуки можно использовать в любом компоненте, что позволяет избежать многих ошибок, связанных с ключевым словом `this`, на которое опирается API классовых компонентов. Вместо доступа к свойствам из экземпляра компонента хуки полагаются на замыкания. Это делает их привязанными к значениям и устраняет ряд проблем с устаревшими данными, которые могут возникнуть при асинхронном обновлении состояния.
 
@@ -264,7 +264,7 @@ const onClick = useCallback(() => console.log(a, b), [a, b]);
 
 ## useRef
 
-Для получения ссылки на узел DOM внутри функциональных компонентов существует хук `useRef`. Он работает аналогично [createRef](/guide/v10/refs#createref).
+Для получения стабильной ссылки на узел DOM или значение, которое сохраняется между рендерами, мы можем использовать хук `useRef`. Он работает аналогично [createRef](/guide/v10/refs#создание-рефа).
 
 ```jsx
 // --repl
@@ -289,6 +289,8 @@ render(<Foo />, document.getElementById('app'));
 
 > Будьте внимательны и не путайте `useRef` с `createRef`.
 
+> См. [Рефы](/guide/v10/refs) для получения дополнительной информации и примеров.
+
 ## useContext
 
 Для доступа к контексту в функциональном компоненте мы можем использовать хук `useContext`, без каких-либо вышестоящих компонентов или компонентов-оберток. Первым аргументом должен быть объект контекста, созданный в результате вызова `createContext`.
@@ -323,7 +325,7 @@ render(<App />, document.getElementById('app'));
 
 ## Побочные эффекты
 
-Побочные эффекты лежат в основе многих современных приложений. Независимо от того, хотите ли вы получить данные из API или запустить эффект на документе, вы обнаружите, что `useEffect` подходит практически для всех ваших нужд. Это одно из главных преимуществ API хуков — перестройка мышления на эффекты, а не на жизненный цикл компонента.
+Побочные эффекты лежат в основе многих современных приложений. Независимо от того, хотите ли вы получить данные из API или запустить эффект на документе, вы обнаружите, что `useEffect` подходит практически для всех ваших нужд. Это одно из главных преимуществ Hooks API — перестройка мышления на эффекты, а не на жизненный цикл компонента.
 
 ### useEffect
 
diff --git a/content/ru/guide/v10/no-build-workflows.md b/content/ru/guide/v10/no-build-workflows.md
index 459b817e5..c78b087be 100644
--- a/content/ru/guide/v10/no-build-workflows.md
+++ b/content/ru/guide/v10/no-build-workflows.md
@@ -7,7 +7,7 @@ description: 'Хотя такие инструменты сборки, как We
 
 Хотя такие инструменты сборки, как Webpack, Rollup и Vite, невероятно мощны и полезны, Preact полностью поддерживает сборку приложения без них.
 
-Рабочие процессы без сборки — это способ разработки веб-приложений без использования инструментов сборки, вместо этого полагаясь на браузер для облегчения загрузки и выполнения модулей. Это отличный способ начать работу с Preact, который может отлично работать в любых масштабах, но не лишен трудностей.
+Рабочие процессы без сборки — это способ разработки веб-приложений без использования инструментов сборки, вместо этого полагаясь на браузер для облегчения загрузки и выполнения модулей. Это отличный способ начать работу с Preact, который может отлично работать в любых масштабах.
 
 ---
 
@@ -17,11 +17,11 @@ description: 'Хотя такие инструменты сборки, как We
 
 ## Карты импорта
 
-[Карта импорта](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) — это новая функция,
+[Карта импорта](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) — это новая функция браузера,
 позволяющая вам контролировать, как браузеры разрешают спецификаторы модулей, обычно для преобразования пустых спецификаторов, таких как `preact`, в URL-адрес CDN, например `https://esm.sh/preact`. Хотя многие предпочитают эстетику карт импорта, существуют также реальные преимущества их использования, такие как упрощение версионирования, уменьшение/устранение дублирования и
 лучший доступ к более мощным функциям CDN.
 
-Это не значит, что вам нужен импорт карт, но для тех, кто предпочитает отказаться от инструментов сборки, они являются отличным вариантом, по крайней мере, для того, чтобы быть в курсе.
+В общем, мы рекомендуем использовать карты импорта для тех, кто решает обойтись без инструментов сборки, так как они помогают решить некоторые проблемы, с которыми вы можете столкнуться при использовании простых URL-адресов CDN в ваших спецификаторах импорта (подробнее об этом ниже).
 
 ### Пример использования
 
@@ -47,9 +47,7 @@ description: 'Хотя такие инструменты сборки, как We
       import { render } from 'preact';
       import { html } from 'htm/preact';
       export function App() {
-        return html`
-          <h1>Привет, мир!</h1>
-        `;
+        return html`<h1>Привет, мир!</h1>`;
       }
       render(html`<${App} />`, document.getElementById('app'));
     </script>
@@ -59,10 +57,9 @@ description: 'Хотя такие инструменты сборки, как We
 
 Мы создаем тег `<script>` с атрибутом `type="importmap"`, а затем определяем в нем модули, которые хотим использовать, в виде JSON. Позже, в теге `<script type="module">`, мы можем импортировать эти модули с помощью голых спецификаторов, аналогично тому, что вы видите в Node.
 
-> **Примечание:** Мы используем `?external=preact` в приведённом выше примере, поскольку https://esm.sh поможет предоставить
+> **Важно:** Мы используем `?external=preact` в приведённом выше примере, поскольку https://esm.sh поможет предоставить
 > модуль, который вы запрашиваете, а также его зависимости — для `htm/preact` это означает также предоставление
-> копии `preact`. Однако Preact и многие другие библиотеки должны использоваться как синглтоны (только один
-> активный экземпляр за раз), что создаёт проблему.
+> копии `preact`. Однако Preact должен использоваться только как синглтон, и в вашем приложении должна быть только одна его копия.
 >
 > Используя `?external=preact`, мы сообщаем `esm.sh`, что он не должен предоставлять копию `preact`, мы можем обрабатывать
 > это сами. Поэтому браузер будет использовать нашу карту импорта для разрешения `preact`, используя один экземпляр Preact
@@ -104,4 +101,38 @@ description: 'Хотя такие инструменты сборки, как We
     }
   }
 </script>
-```
\ No newline at end of file
+```
+
+## HTM
+
+Хотя JSX обычно является самым популярным способом написания приложений на Preact, он требует этапа сборки для преобразования нестандартного синтаксиса во что-то, что браузеры и другие среды выполнения могут понимать нативно. Однако ручное написание вызовов `h`/`createElement` может быть немного утомительным и не самым удобным, поэтому мы рекомендуем альтернативу, похожую на JSX, под названием [HTM](https://github.com/developit/htm).
+
+HTM не требует этапа сборки (хотя он и может использовать его, см. [`babel-plugin-htm`](https://github.com/developit/htm/tree/master/packages/babel-plugin-htm)), а использует синтаксис [шаблонных строк](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates), который является функцией JavaScript, существующей с 2015 года и поддерживаемой во всех современных браузерах. Это всё более популярный способ написания приложений на Preact и, вероятно, самый популярный для тех, кто решает обойтись без этапа сборки.
+
+HTM поддерживает все стандартные функции Preact, включая компоненты, хуки, сигналы и т. д., единственное отличие заключается в синтаксисе, используемом для написания возвращаемого значения «JSX».
+
+```js
+// --repl
+import { render } from 'preact';
+// --repl-before
+import { useState } from 'preact/hooks';
+import { html } from 'htm/preact';
+
+function Button({ action, children }) {
+  return html`<button onClick=${action}>${children}</button>`;
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return html`
+    <div class="counter-container">
+      <${Button} action=${() => setCount(count + 1)}>Увеличить<//>
+      <input readonly value=${count} />
+      <${Button} action=${() => setCount(count - 1)}>Уменьшить<//>
+    </div>
+  `;
+}
+// --repl-after
+render(<Counter />, document.getElementById('app'));
+```
diff --git a/content/ru/guide/v10/refs.md b/content/ru/guide/v10/refs.md
index fd14c6748..0b711925b 100644
--- a/content/ru/guide/v10/refs.md
+++ b/content/ru/guide/v10/refs.md
@@ -1,13 +1,13 @@
 ---
-name: Ссылки
-description: 'Ссылки можно использовать для доступа к необработанным узлам DOM, отрендеренным Preact.'
+name: Рефы
+description: 'Рефы — это способ создания стабильных значений, которые локальны для экземпляра компонента и сохраняются между рендерами.'
 ---
 
-# Ссылки
+# Рефы
 
-Всегда будут сценарии, в которых вам понадобится прямая ссылка на DOM-элемент или компонент, отрендеренный Preact. `Refs` позволяют вам сделать именно это.
+Ссылки на DOM-элементы, или рефы, — это стабильные локальные значения, которые сохраняются между рендерами компонента, но не вызывают повторные рендеры, как это делают состояние или пропсы при их изменении.
 
-Типичный вариант использования — измерение фактического размера узла DOM. Хотя ссылку на экземпляр компонента можно получить через `ref`, мы обычно не рекомендуем это делать. Это создаст жёсткую связь между родительским и дочерним компонентами, что нарушит возможность компоновки модели компонента. В большинстве случаев более естественно просто передать обратный вызов в качестве свойства, а не пытаться напрямую вызвать метод компонента класса.
+Чаще всего рефы используются для императивного управления DOM, но их можно использовать для хранения любых произвольных локальных значений, которые необходимо сохранить стабильными. Вы можете использовать их для отслеживания предыдущего значения состояния, хранения ссылки на идентификатор интервала или таймаута, или просто для хранения значения счётчика. Важно отметить, что рефы не должны использоваться для логики рендеринга; вместо этого их следует использовать только в методах жизненного цикла и обработчиках событий.
 
 ---
 
@@ -15,114 +15,216 @@ description: 'Ссылки можно использовать для досту
 
 ---
 
-## createRef
+## Создание рефа
 
-Функция `createRef` возвращает обычный объект с одним свойством: `current`. При каждом вызове метода `render` Preact присваивает узлу или компоненту DOM значение `current`.
+В Preact есть два способа создания рефов, в зависимости от предпочитаемого вами стиля компонентов: `createRef` (классовые компоненты) и `useRef` (функциональные компоненты/хуки). Оба API по сути работают одинаково: они создают стабильный, простой объект со свойством `current`, которое можно инициализировать значением по желанию.
+
+<tab-group tabstring="Classes, Hooks">
+
+```jsx
+import { createRef } from "preact";
+
+class MyComponent extends Component {
+  countRef = createRef();
+  inputRef = createRef(null);
+
+  // ...
+}
+```
+
+```jsx
+import { useRef } from "preact/hooks";
+
+function MyComponent() {
+  const countRef = useRef();
+  const inputRef = useRef(null);
+
+  // ...
+}
+```
+
+</tab-group>
+
+## Использование рефов для доступа к DOM-узлам
+
+Наиболее распространённый случай использования рефов — это доступ к базовому DOM-узлу компонента. Это полезно для императивного управления DOM, такого как измерение элементов, вызов нативных методов на различных элементах (например, `.focus()` или `.play()`), а также интеграция со сторонними библиотеками, написанными на чистом JavaScript. В следующих примерах, после рендеринга, Preact присвоит DOM-узел свойству `current` объекта рефа, что сделает его доступным для использования после монтирования компонента.
+
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
 // --repl
-import { render, Component, createRef } from 'preact';
+import { render, Component, createRef } from "preact";
 // --repl-before
-class Foo extends Component {
-  ref = createRef();
+class MyInput extends Component {
+  ref = createRef(null);
 
   componentDidMount() {
     console.log(this.ref.current);
-    // Лог: [HTMLDivElement]
+    // Logs: [HTMLInputElement]
   }
 
   render() {
-    return <div ref={this.ref}>foo</div>;
+    return <input ref={this.ref} />;
   }
 }
 // --repl-after
-render(<Foo />, document.getElementById('app'));
+render(<MyInput />, document.getElementById("app"));
 ```
 
-## Обратные ссылки
-
-Другой способ получения ссылки на элемент может быть осуществлен путём передачи функции обратного вызова. Он немного сложнее, но работает аналогично `createRef`.
-
 ```jsx
 // --repl
-import { render, Component } from 'preact';
+import { render } from "preact";
+import { useRef, useEffect } from "preact/hooks";
 // --repl-before
-class Foo extends Component {
-  ref = null;
-  setRef = (dom) => (this.ref = dom);
+function MyInput() {
+  const ref = useRef(null);
 
-  componentDidMount() {
-    console.log(this.ref);
-    // Лог: [HTMLDivElement]
-  }
+  useEffect(() => {
+    console.log(ref.current);
+    // Logs: [HTMLInputElement]
+  }, []);
+
+  return <input ref={ref} />;
+}
+// --repl-after
+render(<MyInput />, document.getElementById("app"));
+```
+
+</tab-group>
+
+### Колбэк-рефы
+
+Другой способ использования рефов — это передача функции в пропс `ref`, где DOM-узел будет передан в качестве аргумента.
 
+
+<tab-group tabstring="Classes, Hooks">
+
+```jsx
+// --repl
+import { render, Component } from "preact";
+// --repl-before
+class MyInput extends Component {
   render() {
-    return <div ref={this.setRef}>foo</div>;
+    return (
+      <input ref={(dom) => {
+        console.log('Mounted:', dom);
+
+        // Начиная с Preact 10.23.0, вы можете по желанию вернуть функцию очистки
+        return () => {
+          console.log('Unmounted:', dom);
+        };
+      }} />
+    );
   }
 }
 // --repl-after
-render(<Foo />, document.getElementById('app'));
+render(<MyInput />, document.getElementById("app"));
+```
+
+```jsx
+// --repl
+import { render } from "preact";
+// --repl-before
+function MyInput() {
+  return (
+    <input ref={(dom) => {
+      console.log('Mounted:', dom);
+
+      // Начиная с Preact 10.23.0, вы можете по желанию вернуть функцию очистки
+      return () => {
+        console.log('Unmounted:', dom);
+      };
+    }} />
+  );
+}
+// --repl-after
+render(<MyInput />, document.getElementById("app"));
 ```
 
-> Если обратный вызов ref определён как встроенная функция, то он будет вызван дважды. Один раз с `null`, а затем с реальной ссылкой. Это распространённая ошибка, и API `createRef` немного облегчает её, заставляя пользователя проверять, определена ли `ref.current`.
+</tab-group>
+
+> Если предоставленный колбэк рефа нестабилен (например, определённый инлайн, как показано выше) и _не_ возвращает функцию очистки, **он будет вызываться дважды** при каждом повторном рендере: сначала с `null`, а затем с фактической ссылкой. Это распространённая проблема, и API `createRef`/`useRef` немного упрощают это, заставляя пользователя проверять, определено ли `ref.current`.
+>
+> Сравнительно стабильной функцией может быть метод экземпляра классового компонента, функция, определённая вне компонента, или функция, созданная с помощью `useCallback`, например.
+
+## Использование рефов для хранения локальных значений
 
-## Собираем всё воедино
+Однако рефы не ограничиваются только хранением DOM-узлов; их можно использовать для хранения любого типа значений, которые могут понадобиться.
 
-Допустим, нам нужно получить ссылку на узел DOM, чтобы измерить его ширину и высоту. У нас есть простой компонент, в котором необходимо заменить значения placeholder на реально измеренные.
+В следующем примере мы храним идентификатор интервала в рефе, чтобы иметь возможность запускать и останавливать его независимо.
+
+<tab-group tabstring="Classes, Hooks">
 
 ```jsx
-class Foo extends Component {
-  // Здесь мы хотим использовать реальную ширину из узла DOM
+// --repl
+import { render, Component, createRef } from "preact";
+// --repl-before
+class SimpleClock extends Component {
   state = {
-    width: 0,
-    height: 0,
+    time: Date.now(),
   };
+  intervalId = createRef(null);
+
+  startClock = () => {
+    this.setState({ time: Date.now() });
+    this.intervalId.current = setInterval(() => {
+      this.setState({ time: Date.now() });
+    }, 1000);
+  };
+
+  stopClock = () => {
+    clearInterval(this.intervalId.current);
+  };
+
+
+  render(_, { time }) {
+    const formattedTime = new Date(time).toLocaleTimeString();
 
-  render(_, { width, height }) {
     return (
       <div>
-        Ширина: {width}, высота: {height}
+        <button onClick={this.startClock}>Start Clock</button>
+        <time dateTime={formattedTime}>{formattedTime}</time>
+        <button onClick={this.stopClock}>Stop Clock</button>
       </div>
     );
   }
 }
+// --repl-after
+render(<SimpleClock />, document.getElementById("app"));
 ```
 
-Измерение имеет смысл только после вызова метода `render` и установки компонента в DOM. До этого узла DOM не будет существовать, и пытаться его измерить не имеет смысла.
-
 ```jsx
 // --repl
-import { render, Component } from 'preact';
+import { render } from "preact";
+import { useState, useRef } from "preact/hooks";
 // --repl-before
-class Foo extends Component {
-  state = {
-    width: 0,
-    height: 0,
+function SimpleClock() {
+  const [time, setTime] = useState(Date.now());
+  const intervalId = useRef(null);
+
+  const startClock = () => {
+    setTime(Date.now());
+    intervalId.current = setInterval(() => {
+      setTime(Date.now());
+    }, 1000);
   };
 
-  ref = createRef();
+  const stopClock = () => {
+    clearInterval(intervalId.current);
+  };
 
-  componentDidMount() {
-    // Для обеспечения безопасности: Проверьте, была ли предоставлена ссылка
-    if (this.ref.current) {
-      const dimensions = this.ref.current.getBoundingClientRect();
-      this.setState({
-        width: dimensions.width,
-        height: dimensions.height,
-      });
-    }
-  }
+  const formattedTime = new Date(time).toLocaleTimeString();
 
-  render(_, { width, height }) {
-    return (
-      <div ref={this.ref}>
-        Ширина: {width}, высота: {height}
-      </div>
-    );
-  }
+  return (
+    <div>
+      <button onClick={startClock}>Start Clock</button>
+      <time dateTime={formattedTime}>{formattedTime}</time>
+      <button onClick={stopClock}>Stop Clock</button>
+    </div>
+  );
 }
 // --repl-after
-render(<Foo />, document.getElementById('app'));
+render(<SimpleClock />, document.getElementById("app"));
 ```
 
-Вот и всё! Теперь компонент при установке всегда будет отображать ширину и высоту.
+</tab-group>
diff --git a/src/config.json b/src/config.json
index 094cfccff..5f6b56339 100644
--- a/src/config.json
+++ b/src/config.json
@@ -325,7 +325,7 @@
 							"de": "Referenzen",
 							"zh": "引用",
 							"kr": "레퍼런스",
-							"ru": "Ссылки"
+							"ru": "Рефы"
 						}
 					},
 					{