Nice, I love it, thanks for the great article!

I see useState written a lot a little differently, without {}, are both correct?

My code example:

const [isDragging, setDragging] = useState(false);
/* We'll use a `ref` to access the DOM element that the `motion.li` produces. This will allow us to measure its height and position, which will be useful to decide when a dragging element should switch places with its siblings. */
const ref = useRef(null);
/* By manually creating a reference to `dragOriginY` we can manipulate this value if the user is dragging this DOM element while the drag gesture is active to compensate for any movement as the words are re-positioned. */
const dragOriginY = useMotionValue(0);
/* Update the measured position of the word so we can calculate when we should rearrange. */
useEffect(() => { setPosition(i, { height: ref.current.offsetHeight, top: ref.current.offsetTop }); });

vs. your code example:

import React, { useState } from 'react';

function Example() {
  const [state, setState] = useState({counter:0});
  const add1ToCounter = () => {
    const newCounterValue = state.counter + 1;
    setState({ counter: newCounterValue});
  }

  return (
    <div>
      <p>You clicked {state.counter} times</p>
      <button onClick={add1ToCounter}>
        Click me
      </button>
    </div>
  );
}

My question is… How would you just toggle true / false?

Would it be something like this?

import React, { useState } from 'react';

function Example() {
  const [state, setState] = useState({false});
  const toggleCounter = () => {
    const newCounterValue = !state.counter;
    setState({ counter: newCounterValue});
  }

  return (
    <div>
      <p>You clicked {state.counter} times</p>
      <button onClick={toggleCounter}>
        Click me
      </button>
    </div>
  );
}