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

Question

У меня есть компонент, в котором я устанавливаю состояние

const LIMIT_MOBILE = 3;
const LIMIT_WEB = 6;
const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
const initialLimit = isMobile ? LIMIT_MOBILE : LIMIT_WEB;
const [limit, setLimit] = useState(initialLimit);

После установки компонента на мобильном устройстве всегда устанавливается значение 6, что является неправильным. initialLimit устанавливается на 3 через пару мс или после взаимодействия внутри приложения. Любая идея, где проблема может быть?

Редактировать: useMediaQuery из материала-UI

Answer 1

Вам нужно следить за изменениями значения isMobile и устанавливать его впоследствии:

React.useEffect(() => {
  setLimit(isMobile ? LIMIT_MOBILE : LIMIT_WEB);
}, [isMobile])

Это связано с тем, что хук useMediaQuery сам должен вычислить ваш медиа-запрос и затем дать вам результат (к тому времени начальное значение вашего useState уже установлено).

Значение по умолчанию (возвращаемое изначально) для useMediaQuery равно нулю и приводит к значению false (отсюда и неправильный начальный предел).