Component had better do what it's told!

index.js

import React, { useState, useEffect } from "react"
import { get } from "lodash"
import useCallbackOnStateChange from "../lib/useCallbackOnStateChange"

const SomeComponent = ({ locationData }) => {
  const [isGrid, setIsGrid] = useState(() =>
    get(locationData, "state.isGrid", false)
  )
  const [counter, setCounter] = useState(0)

  useEffect(() => {
    setCounter(counter + 1)
    console.log("useEffect... on page load", { isGrid }, { counter })
  }, [])

  useCallbackOnStateChange(() => {
    setCounter(counter + 1)
    console.log("the grid state has changed", { isGrid }, { counter })
  }, [isGrid])

  return (
    <section>
      <button onClick={() => setIsGrid(!isGrid)}>Change grid state</button>
      <br />
      <br />
      <div>normal layout {isGrid && "x"}</div>
      <div>grid layout {!isGrid && "x"}</div>
    </section>
  )
}

export default SomeComponent

This will be server-side rendered - FYI (if that matters)