globals

Проверяет, что во время рендера нет присваивания и изменения глобальных переменных. Это часть правила, по которому побочные эффекты должны выполняться вне рендера.

Подробности правила

Глобальные переменные живут вне контроля React. Если менять их во время рендера, ломается допущение React, что рендеринг чистый. Из-за этого компоненты могут вести себя по-разному в разработке и в продакшене, ломается Fast Refresh, а приложение нельзя оптимизировать возможностями вроде компилятора React.

Неверно

Примеры неверного кода для этого правила:

// ❌ Global counter
let renderCount = 0;
function Component() {
  renderCount++; // Mutating global
  return <div>Count: {renderCount}</div>;
}

// ❌ Modifying window properties
function Component({userId}) {
  window.currentUser = userId; // Global mutation
  return <div>User: {userId}</div>;
}

// ❌ Global array push
const events = [];
function Component({event}) {
  events.push(event); // Mutating global array
  return <div>Events: {events.length}</div>;
}

// ❌ Cache manipulation
const cache = {};
function Component({id}) {
  if (!cache[id]) {
    cache[id] = fetchData(id); // Modifying cache during render
  }
  return <div>{cache[id]}</div>;
}

Верно

Примеры верного кода для этого правила:

// ✅ Use state for counters
function Component() {
  const [clickCount, setClickCount] = useState(0);

  const handleClick = () => {
    setClickCount(c => c + 1);
  };

  return (
    <button onClick={handleClick}>
      Clicked: {clickCount} times
    </button>
  );
}

// ✅ Use context for global values
function Component() {
  const user = useContext(UserContext);
  return <div>User: {user.id}</div>;
}

// ✅ Synchronize external state with React
function Component({title}) {
  useEffect(() => {
    document.title = title; // OK in effect
  }, [title]);

  return <div>Page: {title}</div>;
}

Источник — https://react.dev/reference/eslint-plugin-react-hooks/lints/globals

Комментарии