score:15
Accepted answer
you want to use react.memo
for this. read more here.
this will prevent re-renders when props did not change.
instead of export default child;
use export default react.memo(child);
in your child.js
.
import react from "react";
function child(props) {
console.log("child component");
return <div classname="app">child page</div>;
}
export default react.memo(child);
score:-5
you gonna have to set up a redux state
or you just isolate the react hook usestate
, make a good component destructuring :)
app.js
import react, { usestate } from "react";
import reactdom from "react-dom";
import child from "./child";
import parent from "./parent"; // <--------- here
import "./styles.css";
function app() {
return (
<div classname="app">
<parent />
<child data={"any data"} />
</div>
);
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
parent.js
function parent() {
const [any_state, setanystate] = usestate(false);
const handleclick = () => {
setanystate(!any_state);
};
return (
<>
parent page ({any_state ? "true" : "false"})
<br />
<button onclick={handleclick}>click me</button>
</>
);
}
Source: stackoverflow.com
Related Query
- How to stop re render child component when any state changed in react js?
- React - How do i force child components to re render when parent state component changes?
- How to re-rendering react class component when state is changed
- How to check state of a child component in react in render function?
- How to stop re-rendering all Childs in React render function when I change just one child value?
- How to render component conditionally when leaf value of global state changes using react hooks
- How to prevent Re-render in react when the state is changed using Functional Component
- React Re-renders When Parent State is Changed Through Child Component
- Is there a performance hit when methods returning JSX are called in render function of React component whenver any state is changed?
- How to cause a component to re render in react when using a hook which holds some state
- How to test side-effect when state hook is passed to a child component using React and jest?
- How can I render a child component or parallel component when a state is set in ReactJS?
- Trigger event when the state of child of another component changed in react
- How to replace a React component with another one when its state is changed
- how to stop re-rendering of child component if parent update the context or state in react js?
- How to update state of child component when it get called in map function from parent component React JS
- How to prevent child component from re-rendering when using React hooks and memo?
- React component not updating when store state has changed
- How to access state when component unmount with React Hooks?
- How to pass the match when using render in Route component from react router (v4)
- How to re render parent component when anything changes in Child Component?
- How to maintain react component state when goback from router?
- How to update (re-render) the child components in React when the parent's state change?
- how and when to call a react component methods after state change from redux
- How do I pass all state variables inside react hooks to my child component
- How does React re-use child components / keep the state of child components when re-rendering the parent component?
- How to properly update a react native swiper component when state changes?
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- Stop Rerendering Child Components When Parent State Changes in React
- How to load child component with props on first render with React Hooks
More Query from same tag
- How to compress build files in create react app without ejecting?
- Circular dependency for extracted styles with styled-components
- How do I combine two arrays in react to get a new one with all of the items from the previous two?
- Problem occurs when use find function in React
- How can I disable the Highstocks range selector buttons when loading data asynchronously?
- default styles for semantic-ui-react tab
- Warning: Failed value type: The value `isRequired` is marked as required in `Select`, but its value is `undefined`
- React, how to update state fast
- Unable to setState to React component
- Typescript, React: set array object to state
- How to increase progress antd capacity
- How does one pass a prop as null in react?
- React.js: Axois Post stay on pending(but i am getting data)
- How to style function-plot.js
- Activity needs to be set if initial lifecycle state is resumed
- How to use google translation api with react
- Simple password-protection for React app on Heroku
- React hooks state is not the latest when is used from a non-react callback
- Why won't the user input go inside the database despite success message?
- Is it possible to get values for <options> from an endpoint that sends back json response using axios?
- Res.download() working with html form submit but not an Axios post call
- How to get checkbox/radio being checked with given dynamic id in React Router
- Rendering Material-UI icons from an array
- In a react html5 app, how to a place 3 select lists side by side?
- How to add a custom label title to <svg> content generated with Javascript?
- Firebase cloud functions direct app calling on client
- How to embed google adsense in react js
- updated state problem reactjs is not working
- Type is not assignable to type IntrinsicAttributes
- react markdown type for paragraph renderer?