score:5
Accepted answer
there is a simple fix for your problem!
in index.js
, change this line:
<route exact path="/" component={props => <sub {...props} />} />
with this:
<route exact path="/" render={props => <sub {...props} />} />
the difference between the component
and render
props with an anonymous function is that component={() => <yourcomponent />}
will always re-render when the parent does. with render
, though, re-rendering only happens when necessary.
i would recommend reading this article if you want to know more on the subject: https://tylermcginnis.com/react-router-pass-props-to-components/.
i have forked your codesandbox example here to see the difference: https://codesandbox.io/s/goofy-fermat-m01ct
Source: stackoverflow.com
Related Query
- How to prevent re-rendering the component which is inside router, when the state of super component changes?
- How to prevent Re-render in react when the state is changed using Functional Component
- how to prevent child component from reload when the parent state is change
- How can I avoid unnecessary re rendering of an HOC component, when the parameter component renders in ReactJS with react router
- React-redux component rerenders every time when and unconnected state changes in the store . How do I prevent it?
- How to re Re-render a child component when updating the state inside the child component
- How do I see state when logging to the console instead of Proxy object inside reducer action?
- How to pass the match when using render in Route component from react router (v4)
- how to rerender a component when hash change and change the state
- How to avoid rerender all child components which in loop when parent component state update
- p5.js and React: how to update a sketch inside a component when one of the component's props is updated
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
- How to Prevent Child Component Re-Render when Parent state changes
- React: How to show Spinner & Component (at the same time) when State Changes using `useEffect`
- React Router "Link to" does not load new data when called from inside the same component
- How to prevent component from unmounting immediately when using React Router V4
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?
- React component rendering even when there is no change in the state value
- How to pass updated state to a child component on rendering of the page?
- How to stop the previous component from rendering when it is redirected to another component in react
- How to prevent navigation to a component when a specific part of state is missing?
- How to prevent React from re-rendering the whole component when using setInterval
- react router not rendering the component when using redux
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to skip the rendering of an element of a React functional component when loading?
- When selecting an option in a dropdown, how do I change the state with onChange but with a value other than the one inside the option tags
- How do I prevent an entire list from re-rendering when state of one component changes?
- How to prevent a component's state from "propagating" on to the next component in a slideshow
More Query from same tag
- Why is this getPosts function causing major usage of reads in my firestore database?
- reactjs - Is it possible to have non nested routes
- Serving a static html page from a single page react app with react router
- Using a button in parent component to call function in child component
- Setting a property of an object inside array of objects based on a match: React JS
- internal server error 500 occuring after deploying after using getServerSideProps next :js
- How to handle multiple windows in Electron application with React.JS?
- Cannot satisfy wrapper parameter for react testing library render function using TypeScript
- Why immer.js doesn't allow setting dynamic properties on draft?
- Testing <Input/> component from Material UI using Testing React Library and the call back function is not recongnized in the onChange prop
- Field values don't change when debugging with the redux dev tools plugin
- In react while using function ,it's property not showing on screen
- how to get, by a get from axios, data in useState with react functionnal component
- Calling data from the API for child component in Next.js
- Material-UI withStyles not applying background color
- Trying to create a special design pattern in react, unsure how to achieve it
- ListView of objects updated asynchronously
- Pass value to a modal in jsx map
- Send a prop only if condition is true in react.js
- How to set a basename for react-router Router
- How Do you reset the CSS in React if you're doing styled components?
- How to add gradient css to Nivo Rocks Line chart area?
- Multiple Data Filtering
- onClick is not firing the function correctly in React
- How could I prevent my product list to rerender while parent component updates?
- Is there a faster way to reset a mock when testing with Jest?
- change state based on scroll position on ie
- How to change the fontSize in an Antd table
- TypeError: Cannot read property 'map' of undefined,, trying to read from mongodb
- React - API populated state is undefined