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.
Code runs twice after adding useColorModeValue hook
See original GitHub issueDescription
When I run the app i expect console.log(“log”) to run once, but it got executed twice
Link to Reproduction
https://codesandbox.io/s/chakra-ui-usecolormodevalue-j5y1j?file=/src/App.js
Steps to reproduce
- Visit sandbox
- Click console
- See
console.log("log");got executed twice
When I remove const bg = useColorModeValue("white", "gray"); it runs once as expected
(I need that in my project)
Chakra UI Version
1.6.12
Browser
No response
Operating System
- macOS
- Windows
- Linux
Additional Information
No response
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (4 by maintainers)
Top Results From Across the Web
Prevent custom hook from running twice - Stack Overflow
Closed 3 months ago. I am fetching data from the api using a createAsyncThunk action function. I created a custom hook to call...
Read more >Why is My useEffect Hook Running Twice in React? - Upmostly
As part of React Strict Mode, certain lifecycle functions will be ran twice, such as functions passed to useState, useMemo, or useReducer, ...
Read more >react has detected a change in the order of hooks called - You ...
Your code is breaking this rule, because you are using the useRef hooks after ... React Hooks: useEffect() is called twice even if...
Read more >Color mode (Dark Mode) - NativeBase
useColorModeValue is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value...
Read more >Hooks at a Glance - React
By default, React runs the effects after every render — including the first render. (We'll talk more about how this compares to class...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@anubra266 Thanks. I just finished triaging the issue. This is the white flash/double render issue caused by the ColorModeManager. I’ve tested a local fix with a React app and will follow up with one using Next. Once that’s complete I’ll submit a PR.
Hi @justnoobbot this is not a bug, it’s working as designed by React.
useColorModeValueuses theuseColorMode hook which consumesColorModeContextwith the ReactuseContexthook. TheuseContext` hook is what causes the rerender. Get more explanation here