score:1
Accepted answer
if another prop than fooobar
given to the parent
component changes, the parent
component will be re-rendered, but the first child
component will also be re-rendered since that is given all of the props given to the parent, so its props will also change.
example
const { memo, fragment } = react;
const parent = memo(props => {
console.log("rendered parent");
return (
<fragment>
<child {...props} />
<child foobar={props.foobar} />
</fragment>
);
});
const child = memo(({ foobar }) => {
console.log("rendered child");
return <p>{foobar}</p>;
});
class app extends react.component {
state = {
foobar: "foo",
bazqux: "baz"
};
componentdidmount() {
settimeout(() => this.setstate({ foobar: "bar" }), 1000)
settimeout(() => this.setstate({ bazqux: "qux" }), 2000)
}
render() {
const { foobar, bazqux } = this.state;
return <parent foobar={foobar} bazqux={bazqux} />;
}
}
reactdom.render(<app />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Wrong React hooks behaviour with event listener
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- Setting conditional onClick behaviour in React Component
- React memo components and re-render when passing function as props
- What is the proper way to use React Memo with Flow?
- React memo keeps rendering when props have not changed
- propTypes isRequired constraint mis-leading behaviour in react
- How to reduce react app build time and understanding behaviour of webpack when bundling
- why isn't "exact" the default behaviour in react router
- React Native WebView scroll behaviour doesn't work as expected
- How do I shallow test a react component wrapped in memo and withStyles?
- Keeping sticky positioning behaviour when sticky elements are inside a container (because of React having to render a single parent element)
- React Memo Renders Every Time with same given props
- Pass Children prop to React Memo component
- React Memo Feature gives :- Uncaught Error: Element type is invalid: expected a string but got: object
- React memo with Formik
- React Class behaviour with "this" keyword
- How setState works with memo in react
- ReactJS with React Router - strange routing behaviour on Chrome
- React using forwardRef always update child component even using memo
- Confusing React useEffect hook behaviour
- Javascript / React - Question about .focus() behaviour
- <input type="number"> scroll behaviour differ with React
- Es6 React Arrow function behaviour
- React Memo resets values in component state
- Unexpected behaviour using React useEffect hook
- change styles dynamically with react memo
- React Hooks `useState` set function exhibits sync as well as async behaviour
- React memo creates rerender
- Weird setState behaviour with MaterialUI in React JS
More Query from same tag
- setFieldsValue does not re-render form value
- How can I remove the current card?
- React MUI Select Object not showing selected value
- how to pull api array from website about covid statistics
- How can I remove array from end singly using setState?
- React Typescript Type Cast Issue - Parsing Error: Missing Semicolon
- How do I preserve the dropped item's position?
- Recoil State is not updating properly
- How to pass variables in Graphql Apollo Query
- How to use react to listen a loop events with contract?
- TypeError: Cannot read property 'bind' of undefined reactjs
- Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of laun
- how to use css in JS for nested hover styles, Material UI
- React object is not a function error on useEffect
- How do I make a reusable radio button with reactJS?
- Render HTMLAudioElement DOM element with React
- origin has been blocked by CORS policy Spring boot and React
- React: How can I position the loading component so it is in the center of the image
- Run setState when 2 states are the same
- calling javascript method from react
- Setting a Unique Key for my Cards so that I can click a button and delete them in ReactJS
- Gatsby Unhandled Runtime Error is stating that process is not defined
- Error 404 in Reactjs
- React Typescript type of history and props
- React Radio onChange doesn’t work when deselected by other radio
- Checkbox is not resetting itself on a re-render
- what is this when binding to click event
- How to get Semiotic plot to display in browser
- How to create text file in React native (expo)?
- How to make the code scaleable?