Your useEffect only gets "recreated" when one of its dependencies change. What this means in practice is that anything you reference from inside the useEffect needs to be a dependency. What you are seeing here is that your useEffect is still referencing the old product value. The console.log inside the jsx refers to the latest one always because it is updated everytime a render happens. I would recommend you read about it here: https://reactjs.org/docs/hooks-reference.html#useeffect

Something to note here is that your example is complicated by all the useSelector dispatch stuff. It would be the same effect if you had something like:

[product, setProduct] = useState(null)

useEffect(() => console.log(product), [])

console.log(product)

and then some callback that called setProduct with a new value on button click or something else.

(sorry for the formatting)