Как сделать автоматический рендеринг компонента после изменения в базе данных?

Question

[Orion Orion]

const { logout } = useAuth();
    const [tasks,setTasks] = useState([]);
    const { id } = JSON.parse(localStorage.getItem('id'));
    const [search,setSearch] = useState('');

   <b> const deleteHandler = async (id) => {
        try {
            await axios.delete(`http://localhost:5000/task/${id}`)
        } catch (error) {
            console.log(error)
        }
    }</b>

    const changeSearch = (e) => {
        setSearch(e.target.value)
    }

    const reviewTasks = async () => {
        await axios.get(`http://localhost:5000/task/`, {params: {id}}).then(response => {
                setTasks(response.data)
            })
    }
    const filterTask = tasks.filter(({task}) => {
        return task.toLowerCase().includes(search.toLocaleLowerCase())
    })

        useEffect( async () => {
            reviewTasks()
        },[])

  return <div>
  
        {tasks&&
                filterTask.map((task) => (
                    <div key={task.id} className="task">
                        <p className='name'>{task.task}</p>
                        <b><p  onClick={() => deleteHandler(task.id)}><Delete  className='delete'/></p></b>
                    </div>
                ))
                }
            <div className="search-div">
            <h3>Search</h3>
                <form onSubmit={e => e.preventDefault()}>
                    <input className='search-inp' type="text" placeholder='Search a Task' onChange={changeSearch}/>
                </form>
            </div>
  </div>;
}

здесь показано только удаление!
после удаления или добавления задачи приходится прожимать F5 чтобы изменения отобразились
такая же ситуация с авторизацией
как сделать так чтобы оно все автоматически реагировало на изменения в базе ?

Comments

[Gary_Ihar]

Вебсокеты или через сетИнтервал ддосить

Answer 1

[Archi Barrel]

В useEffect в массив зависимостей надо положить те значения, после изменений который компонента перерендериться.

useEffect( async () => {
reviewTasks()
},[tasks, id ])

p.s. useEffect ассинхронная функция. async перед каллбэком не обязателен