score:3
the reason this appears wonky is related to using <strictmode>
in your index.html
file. if you remove <strictmode>
you'll see your code works the way you expect. but don't do that, you really do have a bug.
react wants functional components to be idempotent, meaning they do not have side effects. to help you catch side-effects, react will call your code twice back to back when it renders. see strict mode by doing this, it helps uncover subtle issues like the one you're currently experiencing.
one solution is to create the random colors once using useeffect()
. another is to generate the colors outside the functional component.
update please mark the answer as 'accepted' if it solves your issue. you are correct. usememo will save the computation so it will not be re-computed unless dependencies change. however, react is purposely calling your code twice (in debug mode only) to help you catch unintentional side effects in your classes or hooks. when using strict mode, it's as if you have two of the component instead of one. i.e.
/* strictmode in debug */
<strictmode>
<app/>
</strictmode>
/* ... be like this: */
<>
<app/>
<app/>
</>
if you (temporarily) remove the <strictmode>
tag you'll see your code works as expected. and if you add code that causes your component to render again (e.g. a click counter) your usememo should prevent the cells from being regenerated each render.
add a console log to print every time createrandomcolors()
is called. since your code is being called twice, you should see the debug log appear twice, but you don't. why not? react surpasses the console.log the 2nd time it calls your code.
at the top of your code (line 3) add const log = console.log
, then replace everywhere you use console.log
with just log
and you'll have the full picture of what's occurring.
keep experimenting. we've all been here.
Source: stackoverflow.com
Related Query
- Wrong colors displayed after React renders div to DOM
- React Router Dom doesn't redirect to specified path on entering of wrong path after handling that. How do I fix it?
- React list rendering wrong data after deleting item
- How to unit test a React component that renders after fetch has finished?
- React + Redux: Scrolling a DOM element after state change
- when multiple React DOM components are used without outer div then JSX won't compile
- DOM isn't ready in time after componentDidMount in React
- React renders the wrong data when deleting the item in the middle of the list
- auto hide a div / flash message after few seconds using css3 react
- React app gets slow renders slow after emitting socketio message
- React outer div assigned wrong id
- SVG is displayed with wrong colors
- React Router Still Renders Previous Page after Routing to New Component
- React hook that runs AFTER the DOM updates
- React failing to update DOM after a element was moved using javaScript from another library
- Why does my React component remain in the DOM after navigating to another page?
- Execute Vanilla JS Scripts in React after DOM Render
- React doesn't re-render the Virtual DOM after the state is changed
- React renders again the same div elements - Reconciliation question
- How to force Antd to append element as child element of div React renders to instead of to HTML body?
- Scroll to a specific div on a new page using react router dom
- Need browsers refresh to get data displayed after user Login in react using redux
- Meteor React renders twice after subscription are ready
- React renders pointless div breaking my flexbox style
- React Router Dom hitting wrong endpoint
- Test React component (Jest & Enzyme) that renders differently after Ajax
- React function after dom has finished rendering
- React not re-rending DOM after state update
- Automatically going to a div element created in React Virtual Dom
- React router 4 renders wrong route?
More Query from same tag
- Include only <script> tag from page source
- Firebase Multi path atomic update with child values?
- Read properties of a script which is returned when my page is loaded
- react router Cannot GET
- Calling A Child Component Inside a Map Function In ReactJs
- How to change button text in Reactjs for a few seconds?
- How to modify object value dynamically by providing an array of its keys?
- ReactJS: Calculate average from array of strings in JSON object during render
- How do I make a generic type alias?
- useQuery not updating properly after useMutation and set cookies for authorization
- Populating Github GraphQL in React (Gatsby)
- Validating React route with axios async function
- Dispatching components via react-redux
- How to create Excel file with right-to-left sheet column order in React?
- How to start animation when props change (via redux) in React Native?
- Trying to convert unix timestamp to the day but same amount of days is being printed instead. Using react
- Confusion about React componentDidMount
- TypeError: getItems[props.action] is not a function
- React router: catch a login-success url with a token being passed then redirect to homepage
- react-hook-form material-ui dropdown Field is missing `name` attribute:
- Pass a ref to a component
- How to show suggestions while entering values in input field?
- Can't bind React element to event listener
- componentWillReceiveProps do not fire
- Preventing Unhandled promise rejection using Sendgrid/mail and nodejs
- problem with creating store and then passing values to mapStateToProps
- Nextjs: Render data from GET request each time the page loads
- if-else statement inside jsx: ReactJS
- React - Logout component issue
- Can't find variable: navigate