UseState() :

When a re-render happens, then state variables are new variables than it was before.

As soon as you call the state variable function then it will update the state variable and render the component once again, and it will find the diff between the old version and the new version; only the new version is rendered, not the old version. For example, if the component contains 10 elements, but 1 element has been updated. Instead of re-rendering the 10 elements, React will re-render the 1 element(updated).

function Button(){
	console.log("helllo")
	//Everything will be re-rendered if the state variable is updated
	
	return (
			<h2>welcome...</h1>
			//It will re-render updated JSX only.
	)
}

Case-sensitive filter:

const filteredData = data.map((res)=> res.name.toLowerCase().includes(searchInput.toLowerCase()) ) setPost(filteredData)

Bug: if you filter the data again and again, the original data is modified to new data(data loss), if you filter the data with new data, not the original data.

Solution:

1. Instead of using a single state variable, you can use two state variables, one variable for original data and another for filtered data.
2. Update the filter data(variable) with the original Data.
3. Display the filter data.
4. Use original data for Filtering purposes.