Why component is not re-rendering after deletion in react - reactjs

Question

Trying to delete element from list but its not re-rendering even I am using useEffect. my code is
import React from "react";
import "./styles.css";
import { useEffect, useState } from "react";
const initialList = [
{
id: 'a',
firstname: 'Robin',
lastname: 'Wieruch',
year: 1988,
},
{
id: 'b',
firstname: 'Dave',
lastname: 'Davidds',
year: 1990,
},
{
id: 'c',
firstname: 'ssh',
lastname: 'asssss',
year: 1990,
},
{
id: 'd',
firstname: 'Asdf',
lastname: 'we32e',
year: 1990,
},
];
export default function App() {
const [list, setList] = useState(initialList);
useEffect(() => {
console.log('useEffect has been called!');
setList(list);
}, [list]);
const handleRemove = (id,i) => {
list.splice(i,1)
setList(list);
}
return (
<div className="App">
<ul>
{list.map((item,i) => (
<li key={item.id}>
<span>{item.firstname}</span>
<span>{item.lastname}</span>
<span>{item.year}</span>
<button type="button" onClick={() => handleRemove(item.id,i)}>
Remove
</button>
</li>
))}
</ul>
</div>
);
}

Answer 1

It's always a problem in react modifying the state directly and is generally considered an anti-pattern.
You could just do something like:
const handleRemove = (id) => {
const newArr = list.filter((el) => el.id !== id);
setList(newArr);
}
And you don't need any useEffect either, the function should handle the state change.