score:2
i think the error boundary is not actually catching the thrown error.
from https://reactjs.org/docs/error-boundaries.html:
note
error boundaries do not catch errors for:
asynchronous code (e.g. settimeout or requestanimationframe callbacks)
asynchronous code includes promises in this case.
see also https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers:
error boundaries do not catch errors inside event handlers.
if you need to catch an error inside event handler, use the regular javascript try / catch statement.
score:4
this seems to be caused by a recent change in react/react-dom. if you revert both to version 16.0.0
, you will see that it only renders the component once. see: https://codesandbox.io/s/components-that-throw-render-twice-03fdb
looking at the version history, there seem to be a couple of bugs fixed relating to error handling in react, so it seems like this re-rendering is a result of a workaround for one of those bugs.
however, this should not be a problem for your app, as the render function should be pure (no side effects) in react apps. so basically, react can call your render function anytime it wants/needs to.
to work around this, you should avoid relying on the component not re-rendering and instead use an effect hook or similar to only fetch when certain props/state change.
source: https://github.com/facebook/react/issues/16130#issuecomment-521637592
Source: stackoverflow.com
Related Query
- Why do React components that throw errors render twice?
- React components render correctly in browser, but Jest test errors when rendering: "Only a ReactOwner can have refs"
- Why my render method is react called twice
- Why does the render function in react is called twice when using the component strategy?
- React w Gatsby: Why is that my font file is downloaded twice sometimes
- How to test react components that render other components with props?
- Why doesn't React component doesn't render even though webpack doesn't throw any errors?
- Why my react app rendered twice and give me an empty array in first render when I'm trying fetching API?
- React context api only render components that use values that have changed
- React: why my links that are inside React components are not working as used to work in pure HTML page?
- React Components child component render twice - any way to fix this?
- REACT gives some errors that I am not sure why
- Remove React components that throw an error from a grid
- i do not understand why my code render twice - simple React
- React Native modal that can render custom Components
- React Architecture: I have a common middle component that needs to render custom child components
- How to render react components by using map and join?
- Typescript - "Cannot find name" errors in React components
- Rendering React components with promises inside the render method
- Why is `Promise.then` called twice in a React component but not the console.log?
- Is there a way to render multiple React components in the React.render() function?
- Jest Enzyme test a React component that returns null in render method
- Using for loops and switch cases in React to dynamically render different components
- React render array of components
- Why shouldn't I use catch() to handle errors in React useEffect API calls?
- Why won't my nested React components render?
- Testing React components that fetches data using Hooks
- React Hooks render twice
- Why React needs another render to bail out state updates?
- Why do components in react need to be capitalized?
More Query from same tag
- React Redux doesn't return expected state
- react, state change but not re-render
- How do I filter my searches?
- How to loop through array to show and hide text on ReactJS
- React push to view after successful purchase
- Using redux and got Parsing error: Unexpected token
- How to I align my icons in the navbar in css react?
- React TypeError when creating custom hook
- reactJS - useEffect() empty response using Axios GET request
- TypeScript error: Type 'string' is not assignable to type for Typography
- How to define props in Typescript when a parent component injects props in its children?
- Passing data from parent to child using react.State but State reset to initial state
- How to choose child element in jss, when I am hover to parent
- Apex chart - line break for labels
- How do I type this reduce callback?
- React Props - can not get data
- How to do server-side rendering in React/redux?
- How can I sort an array using immer?
- Trying to change the colour of SVG Image Icon upon selection Material UI
- Uncaught (in promise) TypeError: error.json is not a function - while destructing error message
- React Input field keeps reverting to default text after being replaced
- Node js - Bundler for http2
- Can't display data from REST call, even though the server is sending data
- Using React-Query QueryCache from another component
- how to create new url by check tab in react
- React CSSTransition with Route renders next page first then works with rendering next page again
- Reactjs webpage with a csv file as database
- How to Access styles from React?
- unable to change state value in usestate hook
- How can i search from mongodb with onchange input field?