State management в MDX

MDX представляет собой расширение Markdown с поддержкой JSX, что позволяет интегрировать компоненты React прямо в Markdown-документы. Это открывает широкие возможности для управления состоянием внутри документации или учебных материалов, делая контент интерактивным.

Использование React state в MDX

Поскольку MDX поддерживает JSX, любые стандартные хуки React работают в MDX-файлах. Наиболее часто используется useState для управления локальным состоянием компонентов.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Счётчик: {count}

      
      
    

  );
}
  • useState позволяет создавать локальное состояние компонента.
  • Обновление состояния вызывает перерендеринг компонента, что отражается на интерфейсе.

В MDX можно импортировать этот компонент и использовать его прямо в тексте:

Контекст для глобального состояния

Для управления состоянием, которое требуется нескольким компонентам, используется React Context. Это удобно для сохранения данных, которые должны быть доступны во всей MDX-документации.

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    
      {children}
    
  );
}

export function ThemeSwitcher() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    

      
Текущая тема: {theme}

      
    

  );
}
  • createContext создаёт объект контекста.
  • useContext позволяет получать текущее значение контекста.
  • Провайдер оборачивает компоненты, чтобы они имели доступ к общему состоянию.

В MDX это будет использоваться так:

Локальное состояние с компонентами MDX

MDX позволяет создавать интерактивные блоки прямо в тексте:

import { useState } from 'react';

export const Spoiler = ({ children }) => {
  const [visible, setVisible] = useState(false);

  return (
    

      
      {visible && 
{children}
}
    

  );
};

Использование в MDX:


  Здесь скрытый контент, который можно показать или скрыть.
  • Преимущество: компоненты остаются декларативными, а управление состоянием не требует сложной логики вне компонента.
  • Взаимодействие с текстом: любые JSX-элементы можно вставлять между Markdown-абзацами.

Управление состоянием с помощью внешних библиотек

Для более сложных сценариев можно подключать библиотеки управления состоянием, такие как Redux, Zustand или Jotai. Они обеспечивают:

  • Глобальное состояние для всех MDX-компонентов.
  • Возможность подписки на изменения состояния.
  • Организацию действий и обработчиков состояния в больших проектах.

Пример с Zustand:

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}));

export function CounterZustand() {
  const { count, increment, decrement } = useStore();
  return (
    

      
Счётчик: {count}

      
      
    

  );
}

Использование в MDX:

  • Плюс: состояние сохраняется между компонентами и обновляется реактивно.
  • Минус: добавляется зависимость и немного усложняется структура документации.

Интерактивные формы и события

MDX позволяет интегрировать формы и обработчики событий, используя привычные механизмы React:

import { useState } from 'react';

export function FeedbackForm() {
  const [input, setInput] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    

       setInput(e.target.value)} 
        placeholder="Введите отзыв" 
      />
      
      {submitted && 
Спасибо за отзыв: {input}
}
    

  );
}
  • Хуки позволяют синхронизировать состояние инпутов, переключателей и других элементов.
  • Компоненты остаются независимыми, их состояние изолировано, что удобно для MDX-документов с множеством интерактивных блоков.

Рекомендации по структуре состояния в MDX

  1. Локальное состояние для небольших интерактивных блоков (useState).
  2. Контекст для состояния, которое используется несколькими компонентами (createContext + useContext).
  3. Внешние библиотеки для сложного или глобального состояния (Zustand, Redux).
  4. Минимализм: стараться избегать глобальных состояний, если можно обойтись локальным.
  5. Компоненты как атомы: каждая интерактивная часть документации должна быть автономной и легко переносимой.
Оглавление