reactjs - useEffect のどの依存関係が更新されたかを確認する

Question

私はこのuseEffectフックを持っています:

useEffect(() => {
  setTop(t => t + (controller.position.y * tileSize))
  setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])

変更があった場合にのみ追加を行いたいですposition。変更があった場合tileSizeは、乗算を実行したいだけです。

2つに分けてみましたuseEffectが、React Hook useEffect has missing dependencies警告が表示されます：

useEffect(() => {
    setTop(t => t + (controller.position.y * spriteSize))
    setLeft(l => l + (controller.position.x * spriteSize))
}, [controller.position])

useEffect(() => {
    setTop((controller.position.y * spriteSize))
    setLeft((controller.position.x * spriteSize))
}, [spriteSize])

この場合のベストプラクティスは何ですか?

編集：

再現可能な例:

const [tileSize, setTileSize] = useState(0)
const controller = {
    position: {
        x: 0,
        y: 0
    }
}
useEffect(() => {
    setTop(t => t + (controller.position.y * tileSize))
    setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])

useEffect(() => {
    setTop((controller.position.y * tileSize))
    setLeft((controller.position.x * tileSize))
}, [tileSize])

const asdf = () => {
    setTileSize(150)
}

return (
    <div onClick={() => asdf()}>click me</div>
)

警告メッセージ:

31 行目: React フックの useEffect には依存関係がありません: 「tileSize」。それを含めるか、依存配列を削除してください。「setTop」が「tileSize」の現在の値を必要とする場合、複数の useState 変数を useReducer に置き換えることもできます

36 行目: React Hook useEffect に依存関係がありません: 'controller.position.x' と 'controller.position.y'。それらを含めるか、依存配列を削除してください react-hooks/exhaustive-deps 行 46: 到達不能コード no-unreachable