Scribd
Upload
81 views3 pages

Derived State in React

Derived state in React refers to state values that are computed from other state or props rather than stored directly. This helps keep state more efficient by minimizing unnecessary updates and avoiding redundant data. An example shows deriving Fahrenheit from Celsius and vice versa to always maintain consistent temperature values.

Uploaded by

aslan.fedaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
81 views3 pages

Derived State in React

Derived state in React refers to state values that are computed from other state or props rather than stored directly. This helps keep state more efficient by minimizing unnecessary updates and avoiding redundant data. An example shows deriving Fahrenheit from Celsius and vice versa to always maintain consistent temperature values.

Uploaded by

aslan.fedaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Derived State

Derived state in React refers to state values


that are computed or derived from other state
values or props. Instead of storing redundant
or duplicate data in your component's state,
you calculate the derived state based on
existing state or props when needed. This can
help keep your component's state more
efficient and minimize unnecessary updates.
import React, { useState, useEffect } from 'react';

function TemperatureConverter() {
const [celsius, setCelsius] = useState(0);
const [fahrenheit, setFahrenheit] = useState(32);

// Calculate Fahrenheit from Celsius


useEffect(() => {
setFahrenheit(celsius * (9 / 5) + 32);
}, [celsius]);

// Calculate Celsius from Fahrenheit


useEffect(() => {
setCelsius((fahrenheit - 32) * (5 / 9));
}, [fahrenheit]);

return (
<div>
<label>Celsius:</label>
<input
type="number"
value={celsius}
onChange={(e) => setCelsius(Number(e.target.value))}
/>

<label>Fahrenheit:</label>
<input
type="number"
value={fahrenheit}
onChange={(e) => setFahrenheit(Number(e.target.value))}
/>
</div>
);
}

export default TemperatureConverter;


In this example, we have two state variables, celsius and fahrenheit, representing
temperatures in Celsius and Fahrenheit. We use useEffect to calculate the derived
state:

When the celsius state changes, we calculate fahrenheit based on the formula
(celsius * 9/5) + 32.
When the fahrenheit state changes, we calculate celsius based on the reverse
formula (fahrenheit - 32) * 5/9.

By deriving fahrenheit from celsius and vice versa, we ensure that the two
temperature values are always consistent with each other, and we avoid storing
redundant data.

Derived state is particularly useful when you want to maintain a relationship between
different pieces of data in your component's state without introducing unnecessary
complexity. It allows you to keep your state clean and update only what's necessary,
improving the efficiency of your React components.

You might also like