Below is simple component of react.
Can we modify in any like using ref or anything so that child component won’t re-render even if the state value changes from parent and still child component gets the latest value.
Again i’m just exploring the possibilities of react and how we use state in react.
i need a help to understand this. hope you all got my question clearly.
import React, { useState } from 'react';
const ParentComponent = () => {
const [state, setState] = useState(0);
return (
<div>
{console.log("parent")}
<h1>Parent Component</h1>
<p>State: {state}</p>
<button onClick={() => setState(state + 1)}>Increment State</button>
<ChildComponent state={state} />
</div>
);
};
const ChildComponent = ({state}) => {
return (
<div>
<h2>Child Component</h2>
{console.log("child")}
<p>State in Child: {state}</p>
</div>
);
};
const App = () => (
<ParentComponent />
);
export default App;
I have provided basic component that we use in daily basis in react.
i just want to have some modification in this component which helps in to stop re-render of child component.
Margish Patel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.