React hooks, update one state in response of another state update - reactjs

Question

How to have second state produced from first state and when the first one changes, make second state to react in response to update it ?
It worked but I am not sure how reliable is doing it that way, any suggestions ? Thanks.
export default function App() {
const [arr, setArr] = useState([1, 2, 3, 4, 5]);
const [length, setLength] = useState(arr.length);
console.log(arr)
const clickHandler = () => {
setArr([...arr, arr.length+1])
};
useEffect(() => {
setLength(length + 1)
}, [arr])
return (
<div className="App">
<h2>{length}</h2>
<button onClick={clickHandler}>click</button>
</div>
);
}

Answer 1

so you want the 'second state' (length) to be updated every time the length of the array changes. For that, you need an effect that will take the length of the array as a dependency (arr.length), and then set length to that value.
Also added a change to the clickHandler function as the state is computed from the previous state (check this for further details)
This is how the final code would look
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [arr, setArr] = useState([1, 2, 3, 4, 5]);
const [length, setLength] = useState(arr.length);
console.log(arr);
const clickHandler = () => {
setArr((arr) => [...arr, arr.length + 1]); // Change #1
};
useEffect(() => {
setLength(arr.length); // Change #2
}, [arr.length]);
return (
<div className="App">
<h2>{length}</h2>
<button onClick={clickHandler}>click</button>
</div>
);
}