How can I refactor my code, using multiple useEffect? - reactjs

Question

Is there a way to refactor/reduce this code please. I have the impresssion yes but I don't know how to do. I'm getting my data from my API.
export default function Plant() {
const [plant, setPlant] = useState([])
const [value1, setValue1] = useState(null);
const [value2, setValue2] = useState(null)
const [value3, setValue3] = useState(null)
...
useEffect(() => {
axios.post(url, { plantId })
.then(res => {
console.log(res)
setPlant(res.data.plants[0])
})
.catch(err => {
console.log(err)
})
}, [plantId]);
useEffect(() => {
if (plant?.water) {
setValue1(WATER.find((t) => t.label === plant.water));
}
}, [plant]);
useEffect(() => {
if (plant?.sun) {
setValue2(SUN.find((t) => t.label === plant.sun));
}
}, [plant]);
useEffect(() => {
if (plant?.date) {
setValue3(DATE.find((t) => t.label === plant.date));
}
}, [plant]);
return (
<div>
<MyDrop options={SUN} value={value2} setValue={setValue2} />
</div>
)
Please check MyDrop and Label code here here:

Answer 1

The last three all depend on the same plant, so there shouldn't be an issue putting them together.
useEffect(() => {
if (plant?.water) {
setValue1(OPTION1.find((t) => t.label === plant.water));
}
if (plant?.sun) {
setValue2(OPTION2.find((t) => t.label === plant.sun));
}
if (plant?.date) {
setValue3(OPTION3.find((t) => t.label === plant.date));
}
}, [plant]);
If you wanted to be more DRY, consider using an array of values instead of multiple separate states, something along the lines of
// feel free to add properties to the below
// which can also be declared outside the component
const plantProperties = ['water', 'sun', 'date'];
const [values, setValues] = useState(() => plantProperties.map(() => null));
useEffect(() => {
plantProperties.forEach((prop, i) => {
if (plant?.[prop]) {
setValues(
values.map((val, j) => i === j ? options[i].find((t) => t.label === plant.water) : val);
);
}
});
}, [plant]);
The plant state also looks pretty suspicious to me; the initial state is an array, since you're doing
const [plant, setPlant] = useState([])
but then you have to check if it's nullish. If you never do something like setPlant(null) or setPlant(undefined), there's no need for the null checks. If you do do that, consider whether you could instead reset the plant to the initial value with setPlant([]) or setPlant({}).
Another issue is that you check if it has certain properties directly on it, as if it was a plan object, which is really weird. Arrays generally shouldn't have arbitrary key-value pairs on them; arrays are for numeric-indexed collections of data only. If you want a collection of arbitrary key-values, consider using a plain object instead.
Another alternative you can consider is to not duplicate the same sort of data in different states. You could have only the plant state, and then calculate the dependent values synchronously afterwards, rather than in an effect hook.
const [plant, setPlant] = useState({})
const values = useMemo(() => calculateValues(plant), [plant]);