Stale closure: Why did my setState only triggered twice?

Lu Yu — Fri, 19 Mar 2021 09:57:11 +0000

I' trying to build a toast message API for React. My goal is to provide a fireNotification() api that can be called anywhere in the app and have React render the toast component.

I built this simple notification manager with sub/pub pattern and hope to be able to subscribe to new notifications in a useEffect hook

const notifications = [];

const listeners = new Set();

function subscribe(callback) {
  listeners.add(callback);
}

function publish() {
  listeners.forEach((cb) => {
    cb(notifications);
  });
}
export function fireNotification(content) {
  notifications.push(content);
  publish();
}

export default function App() {
  const [state, setState] = React.useState();
  React.useEffect(() => {
    subscribe((updated) => {
      setState(updated);
    });
  }, []);

  // state will be logged correctly 2 times
  // won't be updated after that
  console.log("state", state);
  return (
    <div className="App">
      <button onClick={() => {fireNotification('test')}}>fire</button>
    </div>
  );
}

codesandbox

However, fireNotification() will only trigger setState twice

From the 3rd time onward, the state is not updated at all.

I'm able to make state update work by changing setState(updated) to setState([...updated]), but not sure why it works.

Can someone explain why setState(updated); only triggers twice? Thanks!

Blitz.js vs Sails.js

Lu Yu — Mon, 16 Nov 2020 09:50:57 +0000

Does anyone here have experience with both Sails and Blitz?

Both frameworks aspire to be the fullstack solution for JavaScript developers, but how well do they accomplish their goals?

Would love to hear your opinion :)

DEV Community: Lu Yu

Stale closure: Why did my setState only triggered twice?

Blitz.js vs Sails.js