Displaying Error: Too many re-renders in React - reactjs

Question

This is the code that I have written to change the background video based on the user input. The background has a video based on the weather of the location the user enters.
import React, { Fragment, useState, useEffect } from "react";
import cloudy from "../assets/cloudy.mp4";
import sunny from "../assets/sunny.mp4";
import rainy from "../assets/rainy.mp4";
import winter from "../assets/winter.mp4";
const weathers = [cloudy, sunny, rainy, winter];
const Background = (props) => {
const [weather, setWeather] = useState(weathers[1]);
const temp = props.info.current.temp_c;
const rain = props.info.current.precip_mm;
if (rain > 2.5) setWeather(weathers[2]);
else if (temp < 8) setWeather(weathers[3]);
return (
<Fragment>
<video autoPlay loop muted className="back-video">
<source src={weather} type="video/mp4" />
</video>
</Fragment>
);
}
Here's how I return in the App component :
return (
<Fragment>
<div className="container">
<h1>Weather App</h1>
<Input newLocation={locationHandler} />
<article>{content}</article>
</div>
<article>{background}</article>
</Fragment>
)
I tried using UseEffect since I have a re-rendering error but in that case it doesn't change the background at all
useEffect(() => {
if (rain > 2.5) setWeather(weathers[2]);
else if (temp < 8) setWeather(weathers[3]);
}, [weather, temp, rain])
or only weather as a dependency.
Edit: My App component
import React, { useState, useEffect, useCallback, Fragment } from
"react";
import Background from "./components/Background";
import Weather from "./components/Weather";
import Input from "./UI/Input";
function App() {
const [weather, setWeather] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [location, newLocation] = useState("New Delhi");
const locationHandler = (place) => {
newLocation(place);
};
const fetchweatherHandler = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
//console.log(location);
const response = await fetch(
`http://api.weatherapi.com/v1/current.json?
key={apiKey}&q=${location}&aqi=yes`
);
if (!response.ok) {
throw new Error("Something went wrong!");
}
const data = await response.json();
//console.log(data);
setWeather(data);
} catch (error) {
setError(error.message);
}
setIsLoading(false);
}, [location]);
useEffect(() => {
fetchweatherHandler();
}, [fetchweatherHandler]);
let content = <p>Found no weather.</p>;
let background = <p>No Background</p>;
if (weather && Object.keys(weather).length > 0) {
content = weather && <Weather info={weather} />;
background = weather && <Background info={weather} />;
}
if (error) {
content = <p>{error}</p>;
}
if (isLoading) {
content = <p>Loading...</p>;
}
return (
<Fragment>
<div className="container">
<h1>Weather App</h1>
<Input newLoc={locationHandler} />
<article>{content}</article>
</div>
<article>{background}</article>
</Fragment>
);
}
export default App;

Answer 1

So UseEffect works like this. Which ever state you are passing in the [], useEffect will listen to its state and whenever the state changes it executes the code inside the useEffect. It also runs the code once the component mounts.
In your case, you are passing [weather] and inside the useEffect you are changing the setWeather which changes weather. So useEffect runs again which set's weather again and it goes on causing an infinite loop and causing too many rerender error.
You can use it like the below but it won't rerender every time weather changes.
useEffect(() => {
if (rain > 2.5) setWeather(weathers[2]);
else if (temp < 8) setWeather(weathers[3]);
}, [temp, rain])
checkout the topic lifecycle of components in react functional components to know more about this