状态更改后 useEffect 挂钩未触发

我有两个兄弟组件，它们通过反应中的上下文共享状态。 组件之间共享的状态是一个数组。

如果我更新arr在一个组件中声明，我希望另一个组件侦听该更新并相应地执行某些操作。当我使用useEffect在第二个组件中，我监听以下内容的变化arr状态变量。

例如：

// App Component -------
const App = props => {
 const { arr, setArr } = useContext(GlobalContext)
  
 const handleChange = () => {
   const newArr = arr
   [10, 20, 30, 40].map(v => {
     newArr.push(v)
     setArr(newArr)
   })

  return (...)
}

// App2 (Sibling) Component 
const App2 = props => {
  const { arr, setArr } = useContext(GlobalContext)
  const [localArr, setLocalArr] = useState(0)

  useEffect(
    () => {
      updateLocalState()
    },
    // fire if "arr" gets updated
    [arr]
  )

  const updateLocalState = () => {
    setLocalArr(localArr + 1)
  }

  return (...)
}

The useEffect钩子是only在初始渲染时触发，尽管状态arr更新。

我知道声明一个新变量const newArr = arr我的状态变量是一个引用，所以newArr.push(v)从技术上讲是一种状态突变。但是，状态仍然更新，不会引发警告，并且useEffect什么也没做。

为什么useEffect尽管状态更新了但没有被调用？是因为状态突变吗？

第二个问题：为什么没有抛出有关状态突变的警告或错误？状态突变是危险的 - 如果发生这种情况，我预计会出现某种警告。

现场演示在这里：

作为第二个参数传递给的数组useEffect只检查数组中的元素是否===到之前渲染中的元素。const newArr = arr;将导致newArr === arr因为它不会创建新数组，这不是您想要的。

创建一个新数组，其中包含所有元素arr它会按预期工作。

const App = props => {
 const { arr, setArr } = useContext(GlobalContext)

 const handleChange = () => {
   const newArr = [...arr]
   [10, 20, 30, 40].forEach(v => {
     newArr.push(v)
   })
   setArr(newArr)
 }

  return <>{/* ... */}</>
}