Why does Component re-renders on Click and state change? - reactjs

Question

Why does a whole component in react re-render when you change state in a onClick?
exmaple : https://codesandbox.io/s/vibrant-firefly-sgk5g?file=/src/App.js
When you click on the numbers the whole components re-renders , and if you remove the setCount from the on click function it works just fine
The idea behind the component is to add a "Active" class to the number that you have clicked, and it updated a random counter, that counter prevents the addition the "active" class, since it re-renders the whole component
EDIT: code here aswell
import React, { useState } from "react";
const Hours = () => {
const days = [1, 2, 3, 4, 5, 6];
const [count, setCount] = useState(1);
const TestClick = (e, item) => {
setCount(count + 1);
e.currentTarget.className = "active";
};
const HandleHours = () => {
let block = <span />;
if (days) {
block = days.map((hour, index) => {
return (
<span
style={{ display: "block" }}
onClick={e => {
TestClick(e, hour);
}}
className={`col-md-4`} key={index}>
{hour}
</span>
);
});
}
return block;
};
return (
<div>
<HandleHours />
</div>
);
};
export default Hours;

Answer 1

The issue here isn't coming from the fact that the HandleHours components render but because it gets remounted everytime you change the state in the Hours component.
This happens because HandleHours is defined as a component within Hours component and everytime Hours re-renders a new reference to HandleHours is created which fools react into thinking that the component detached from DOM and a new component replaces it, since it essentialy works on reference.
Now when you render HandleHours like
<div>
{ HandleHours () }
</div>
Suddenly HandleHours turns from being a component to a function which returns JSX so this time when the Hours component re-renders, even though the function reference to HandleHours has changed. It returns the JSX with a key prop on it, which remains the same and hence React treats it as a re-render and hour changes to DOM elements aren't lost
Now there is a solution to the first approach too
All you need to do is to create a component HandleHours outside of your Hours component and render it by passing the required props like
import React, { useState } from "react";
import "./styles.css";
const HandleHours = ({ days, TestClick }) => {
let block = <span />;
if (days) {
block = days.map((hour, index) => {
return (
<span
style={{ display: "block" }}
onClick={e => {
TestClick(e, hour);
}}
className={`col-md-4`}
key={index}
>
{hour}
</span>
);
});
}
return block;
};
const days = [1, 2, 3, 4, 5, 6];
const Hours = () => {
const [count, setCount] = useState(1);
const TestClick = (e, item) => {
setCount(count + 1);
console.log("TestClick");
e.currentTarget.className = "active";
};
return (
<div>
<HandleHours days={days} TestClick={TestClick} />
</div>
);
};
export default Hours;
When you do that the HandleHours component isn't re-mounted on each rerender of Hours component and it maintains the DOM elements correctly.
Here is a working demo for the second approach

Answer 2

It's the way react rerenders when a component state changes. The state hook rerenders the whole component that it's in when the setState function is called which is the second element in the array that useState returns.
If you want to change the class of an element on click, you need to store it as a state. In your code, the class of clicked span is updated on click, but right after that the component is rerendered and set to what the HandleHours returns.
I would probalby have a state that keeps track which day is clicked and render that accordingly (not sure why you need the count, but I left it there):
import React, { useState } from "react";
const Hours = () => {
const days = [1, 2, 3, 4, 5, 6];
const [count, setCount] = useState(1);
const [clickedDays, setClickedDays] = useState([]); // Added clickedDays state
const TestClick = (e, item, isDayClicked) => {
setCount(count + 1);
if (!isDayClicked) { // Setting clicked days if they are not in the array yet
setClickedDays([...clickedDays, item])
}
};
const HandleHours = () => {
let block = <span />;
if (days) {
block = days.map((hour, index) => {
const isDayClicked = clickedDays.includes(hour);
return (
<span
style={{ display: "block" }}
onClick={e => {
TestClick(e, hour, isDayClicked);
}}
className={isDayClicked ? 'active' : 'col-md-4'} // Setting different class depending on state
key={index}
>
{hour}
</span>
);
});
}
return block;
};
return (
<div>
<HandleHours />
</div>
);
};
export default Hours;