Why state is not updated after button click using hooks?

Question

Could you please tell me why state is not updated? On button click I updated the state but when I console my state on setinterval it is not updated why?

Here is my code

https://codesandbox.io/s/cool-shamir-8lmpo

 <button
        onClick={() => {
          setState({
            filters: {
              apps: "DDDDDDH",
              searchText: "12333",
              taskType: "",
              dateFrom: "",
              dateTo: "",
              status: ""
            }
          });
        }}
      >


useEffect(() => {
    console.log("===============");
    setInterval(() => {
      console.log(state);
    }, 10000);
  }, []);

After button click searchText: "12333", searchtext should be 12333 in state but it is showing empty wny?

Answer 1

What happens here is, The state is changing when the button gets clicked, but to render it in console setInterval should be cleared. try this..

useEffect(() => {
    console.log("===============");
    const interval = setInterval(() => {
      console.log(state);
    }, 10000);
    return () => clearInterval(interval);
}, [state]);

Answer 2

Setting state is async in React, instead of using interval, you need to track the state value useEffect 's dependency array:

useEffect(() => {
      console.log(state);
  }, [state]);

Answer 3

Why are you using setInterval while you are updating state on button click? Try this.

useEffect(() => {
    console.log("===============");

    console.log(state);
  }, []);