fix(react): remove console errors #385
Conversation
| () => | ||
| controller.subscribe(() => | ||
| process.nextTick(() => setState(controller.state)) | ||
| ), |
There was a problem hiding this comment.
This is fixing the following error:
Cannot update a component ("PagerRenderer") while rendering a different component ("ResultListRenderer")
In all the documentation I found, it says that the error can be prevented by enclosing the setState method inside the useEffect hook (which is already the case here).
So, is it possible that the Pager and ResultList controllers are "dispatching" their new state at the same time, which causes the 2 components to trigger a page render at the same moment?
There was a problem hiding this comment.
My React is rusty but... process.nextTick ? in a browser ?
There was a problem hiding this comment.
Well, it is supported but I'll switch to setTimeout(0).
There was a problem hiding this comment.
Well, it is supported but I'll switch to setTimeout(0).
But... How 😕 When you break on this line, what is going on 🤯 what is process?
There was a problem hiding this comment.
It's an implementation of process for browsers
https://www.npmjs.com/package/process
There was a problem hiding this comment.
Mh why not then, curious where does it come from?
| @@ -1,8 +1,8 @@ | |||
| import red from '@material-ui/core/colors/red'; | |||
| import {createMuiTheme} from '@material-ui/core/styles'; | |||
| import {createTheme} from '@material-ui/core/styles'; | |||
There was a problem hiding this comment.
createMuiTheme is deprecated
| @@ -25,7 +25,7 @@ const SearchPage: React.FunctionComponent<ISearchPageProps> = (props) => { | |||
| return ( | |||
| <EngineProvider value={engine}> | |||
| <Container maxWidth="lg"> | |||
| <Grid container justify="center"> | |||
| <Grid container justifyContent="center"> | |||
There was a problem hiding this comment.
justify is deprecated
| @@ -62,16 +67,16 @@ const Hero: React.FunctionComponent<IHeroProps> = (props) => { | |||
| Essential Links | |||
| </Typography> | |||
| <ul> | |||
| <li> | |||
| <li key="item-link-headless"> | |||
There was a problem hiding this comment.
Each item in a list should have a key
| {props.logos.map((logo, idx) => ( | ||
| <img | ||
| src={logo} | ||
| key={'image-' + idx} |
There was a problem hiding this comment.
Each item in a list should have a key
| "display": "standalone", | ||
| "theme_color": "#000000", | ||
| "background_color": "#ffffff" | ||
| } |
There was a problem hiding this comment.
To fix the following error
Manifest: Line: 1, column: 1, Syntax error.
Proposed changes
Fix all the issues causing an error in the browser console
Testing
CDX-513