Где хранится состояние компонента?

Где хранится состояние компонента?

Краткий ответ

Состояние компонента может храниться в нескольких местах:

1. Внутри самого компонента — локальное состояние (useState в React)
2. В родительском компоненте — lifted state
3. В глобальном хранилище — Redux, Context API, Zustand
4. В URL — query parameters,路径
5. В браузере — localStorage, sessionStorage
6. На сервере — в базе данных

Выбор места зависит от области видимости состояния.

1. Локальное состояние компонента (useState)

Место: В памяти компонента (React Fiber)

Когда использовать:

• Состояние используется только в этом компоненте
• Например: открыто ли меню, текущее значение в input

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Где хранится: В объекте Fiber внутри React. Когда компонент размонтируется, состояние теряется.

2. Состояние родительского компонента (Lifted State)

Место: В родительском компоненте

Когда использовать:

• Несколько дочерних компонентов используют одно состояние
• Нужно синхронизировать состояние между компонентами

function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <Child1 count={count} onIncrement={() => setCount(count + 1)} />
      <Child2 count={count} />
    </div>
  );
}

function Child1({ count, onIncrement }) {
  return <button onClick={onIncrement}>Count: {count}</button>;
}

function Child2({ count }) {
  return <p>Current count is {count}</p>;
}

Где хранится: В памяти Parent компонента. Когда Parent размонтируется, состояние теряется.

3. Context API (Глобальное состояние)

Место: В контексте React (также в памяти, но доступно всем компонентам в дереве)

Когда использовать:

• Состояние нужно многим компонентам на разных уровнях дерева
• Например: текущий пользователь, тема приложения, язык
• НЕ для часто меняющегося состояния (производительность)

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

function Profile() {
  const { user } = useContext(AuthContext);
  return <p>Welcome, {user?.name}</p>;
}

Где хранится: В памяти React (как часть Context object). Доступно всем компонентам, обернутым в Provider.

4. Глобальное хранилище (Redux, Zustand, Recoil)

Место: В отдельном хранилище вне React

Когда использовать:

• Сложное состояние с множеством логики
• Много компонентов используют одно состояние
• Нужна история изменений (time-travel debugging)
• Требуется предсказуемое управление состоянием

Redux пример:

// Store
const store = createStore(counterReducer);

// Компонент
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Zustand пример (проще):

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

function Counter() {
  const { count, increment } = useStore();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

Где хранится: В отдельном объекте JavaScript, вне React. Существует столько же, сколько приложение работает.

5. URL и Query Parameters

Место: В адресной строке браузера

Когда использовать:

• Навигационное состояние (текущая вкладка, фильтры)
• Состояние должно быть шарируемым (копируй URL, отправляй другому)
• Нужна история браузера (кнопка Back должна работать)

function SearchResults() {
  const router = useRouter();
  const { query } = router.query; // query из URL
  
  const handleSearch = (term) => {
    router.push(`/search?query=${term}`);
  };
  
  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} />
      <p>Results for: {query}</p>
    </div>
  );
}

// URL: /search?query=javascript

Где хранится: В объекте History браузера и адресной строке.

6. Browser Storage (localStorage, sessionStorage)

Место: На диске браузера (localStorage) или в памяти сессии (sessionStorage)

Когда использовать:

• Состояние должно сохраняться между сессиями (localStorage)
• Состояние нужно только в текущей вкладке (sessionStorage)
• Например: сохраненные фильтры, кэш данных
• НЕ для чувствительных данных (токены, пароли)

function Counter() {
  const [count, setCount] = useState(() => {
    // Инициализация из localStorage
    const saved = localStorage.getItem(count);
    return saved ? parseInt(saved) : 0;
  });
  
  const handleIncrement = () => {
    const newCount = count + 1;
    setCount(newCount);
    localStorage.setItem(count, newCount); // Сохраняем
  };
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
}

Где хранится: На диске (или в памяти вкладки для sessionStorage).

7. Серверное состояние (Server State)

Место: На сервере в базе данных

Когда использовать:

• Постоянные данные (профиль пользователя, посты, комментарии)
• Данные, которые должны синхронизироваться между устройствами
• Критичные данные, которые нельзя потерять

function Profile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(/api/user)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <p>Loading...</p>;
  
  return <div>{user.name}</div>;
}

Где хранится: В базе данных на сервере (PostgreSQL, MongoDB, и т.д.).

Сравнительная таблица

Правило выбора

1. Начни с useState — самый простой вариант
2. Используй Context API — если нужна глобальная область видимости
3. Переходи на Redux/Zustand — если состояние становится сложным
4. Добавь localStorage — если нужна персистентность
5. Синхронизируй с сервером — если данные должны быть постоянными

Типичный паттерн React компонента

function ShoppingCart() {
  // Локальное состояние UI
  const [isExpanded, setIsExpanded] = useState(false);
  
  // Глобальное состояние (из Redux/Context)
  const cartItems = useSelector(state => state.cart.items);
  
  // Навигационное состояние (из URL)
  const { sort } = useRouter().query;
  
  // Серверное состояние (из API)
  const { data: prices } = useFetch(/api/prices);
  
  return (
    <div onClick={() => setIsExpanded(!isExpanded)}>
      {isExpanded && cartItems.map(item => ...)}
    </div>
  );
}

Итог

Состояние компонента может храниться в 7 разных местах — выбор зависит от области видимости, персистентности и типа данных. Начинай с простого (useState), добавляй сложность по необходимости.