React.js ~State lift down patterns for preventing unnecessary rendering~
React invokes unnecessary rendering as follows; When a state is updated in a component When a parent component is renderd A component that invokes a heavy rendering Let's consider aa component that invokes
React invokes unnecessary rendering as follows;
- When a state is updated in a component
- When a parent component is renderd
A component that invokes a heavy rendering
Let's consider aa component that invokes a heavy rendering.
<SuperSlowComponent> is equipped with a while loop that renders a JSX synchronously in 200ms.
import { useState } from "react";
function SuperSlowComponent() {
const now = performance.now();
while (performance.now() - now < 200) {}
return <div>Super slow component</div>;
}
export default function App() {
const [name, setName] = useState("");
return (
<div className="App">
<label htmlFor="name">Name</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<SuperSlowComponent />
</div>
);
}
The issue is that <SuperSlowComponent> is rendered everytime state is updated by putting values to the input form, and calling setName.
State Lift Down Pattern
This pattern involves a specific state depending on a specific component. By extracting it to another component, the other parts of the component won't be rerendered. This is because the child component keeps the state.
Let's see the paractical codebase.
import { useState } from "react";
function SuperSlowComponent() {
const now = performance.now();
while (performance.now() - now < 200) {}
return <div>Super slow component</div>;
}
function Form() {
const [name, setName] = useState("");
return (
<>
<label htmlFor="name">Name</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</>
);
}
export default function App() {
return (
<div className="App">
<Form />
<SuperSlowComponent />
</div>
);
}
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.