added data don't update automatically in useEffect() Need refresh browser to get the last addition

I have a trouble in small app. I have one component that add data to db. Works well. In other component I fetch the data inside useEffect() and make a search from db. As well works well. The two components are returned in my App.js. The problem is that when I add data and go to search I need to refresh the page for search the last adding. So if I don’t refresh the page it doesn’t find it. How to solve this? (a bit explained if possible) 🙂

From component Search.js

 useEffect(()=>{
        axios.get("http://localhost:3004/api/list/").then(resp=>{
            console.log(resp.data)
            setList(resp.data) ;
        })
    },[])

From component

const AddData = () =>{
    const [name, setName] = useState();
    const [tel, setTel] = useState();
    const [gender, setGender] = useState();
    
    const dispatch = useDispatch();


    const handleSubmit = (e) => {
        e.preventDefault();
        // starting to work to save input to DB via API 
        //  dispatch(addList(name,tel,gender));
        dispatch(addList(name,tel,gender))
    }
    return(
    ```
    

3 thoughts on “added data don't update automatically in useEffect() Need refresh browser to get the last addition”

Leave a Comment