Comment by andrewstuart

I love React but I use no state management, apart from useState locally within components.

State management in React is a major source of pain and complexity and if you build you application using events then you can eliminate state entirely.

Most state management in react is used to fill out props and get the application to behave in a certain way - don't do it - too hard, drop all that.

Here is how to control your React application and make it simple and get rid of all state except useState:

    const ImageComponent = () => {
      const [cacheBust, setCacheBust] = useState(0);

      useEffect(() => {
        const eventListener = () => setCacheBust(Date.now());
        window.addEventListener('customEvent', eventListener);
        return () => window.removeEventListener('customEvent', eventListener);
      }, []);

      return (
        <div>
          <h2>Profile Image</h2>
          <img
            src={`https://example.com/profile-image.jpg?cachebust=${cacheBust}`} // Image URL with cacheBust as query param
            alt="Profile"
            style={{ maxWidth: '200px' }}
          />
        </div>
      );
    };

    // Component that dispatches custom event
    const DispatcherComponent = () => {
      const dispatchCustomEvent = () => window.dispatchEvent(new CustomEvent('customEvent'));

      return (
        <div>
          <h2>Dispatcher Component</h2>
          <button onClick={dispatchCustomEvent}>Reload Image</button>
        </div>
      );
    };

Trust me - once you switch to using custom events you can ditch all that crazy state and crazy usage of props to drive the behaviour of your application.