State and Hooks in ReactJS

React’s state mechanism allows our app to “remember” information like the city name and the weather data.

We use the useState Hook to create reactive state variables:

const [city, setCity] = useState("");

const [weather, setWeather] = useState(null);

• city stores the text the user types into the input box.
• weather stores the response we get from the weather API.

Whenever we call setWeather, React automatically re-renders the component to reflect the new data in the UI. This is the core of React’s reactive design.