Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useBreakpointValue does not work with `px` values

See original GitHub issue

🐛 Bug report

useBreakpointValue totally not working

💥 Steps to reproduce

Go to https://codesandbox.io/s/blissful-mayer-3kwdq?file=/src/index.ts
Resize result view a bit.
As you can see it is blinking and console full with errors.

index.js:27 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Herna (https://3kwdq.codesandbox.io/src/App.tsx:33:74)
    at div
    at Styled(div) (https://3kwdq.csb.app/node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:87:44)
    at ColorModeProvider (https://3kwdq.csb.app/node_modules/@chakra-ui/color-mode/dist/esm/color-mode-provider.js:41:15)
    at ThemeProvider (https://3kwdq.csb.app/node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:114:42)
    at ChakraProvider (https://3kwdq.csb.app/node_modules/@chakra-ui/react/dist/esm/chakra-provider.js:15:18)
    at App

🧐 Expected behavior

IMO it should not make such things. But it just my opinion

🌍 System information

Software	Version(s)
Chakra UI	1.1.4

📝 Additional information

Also I found a "fix" https://github.com/chakra-ui/chakra-ui/issues/2990 but in version 1.1.2 useBreakpointValue works fine (1.1.3. totally not working because it has wrong dependencies)

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:7 (4 by maintainers)

Top GitHub Comments

3reactions

dodascommented, Feb 10, 2021

I think the root of the problem here is that extendTheme merges default breakpoints with user provided breakpoints. Regardless of what units you use, the breakpoints will be merged. In the docs we explicitly note that you should not mix units: Screenshot 2021-02-11 at 00 39 41

…But we do so in our own utility. I consider this a bug.

The question is whether we can fix this without considering it a breaking change.

cc @chakra-ui/react-team

1reaction

ivanyeohcommented, Feb 1, 2021

Another workaround for using px values is by specifying all the breakpoints. i.e. const breakpoints = createBreakpoints({ sm: "320px", md: "768px", lg: "960px", xl: "1200px", "2xl": "1200px", })

Because if we don’t specify value for e.g. 2xl, the value will be the default 96em and be parseInt and cause the incorrect sorting order https://github.com/chakra-ui/chakra-ui/commit/5db7d9a31bd5c91c617f48a2e31cf602fd2cdd5b#diff-5ace375c5eeadc6f170d8314834a1ddbc0dca440c3c97ee900fb60e95edd6024R9

Top Results From Across the Web

useBreakpointValue - Chakra UI

useBreakpointValue. useBreakpointValue is a custom hook which returns the value for the current breakpoint from the provided responsive values object.

Building responsive components in Chakra UI - LogRocket Blog

In this article, we will learn how to build responsive components with Chakra UI and use that knowledge to build this dashboard application....

Upgrading to v1 - Chakra UI

It is adviseable to not mix css units. Reason: Previously, breakpoints on a theme had to be an array with your breakpoints in...

Utility Props Specificity - NativeBase

This follows React Native's specificity precedence- while applying utility style props to a component, the order does not matter.So, px="2" will be applied ......

Using Material-UI breakpoints with pixel values instead of sm ...

The theme.breakpoints.between function supports passing numbers instead of breakpoint keys. The only issue is that you are passing them in ...