React-joyride and state management recommendation and multi app route questions

[anguyen-codelink]

Howdy React Team,

I am wondering what kind of state management do you recommend with React-joyride? There were discussions of using zustand but then as a new developer I am unfamiliar and read about redux too, so now I am confused on which one would be better. I've created a tutorial for first time user to walk through each page that will prompt it to click on the specified navigation link , but for some of the triggers to the next step I do, I am using windows listener for a specific toast like "success" which I feel is not efficient in anyway. I will test out zustand to replace the windows listeners.

[gilbarbara]

Hey @anguyen-codelink

First off, great job diving into React-Joyride and thinking about state management—it's totally normal to feel a bit overwhelmed with all the different options! 😊

Just a quick heads-up: despite having "React" in the name, React-Joyride isn’t maintained by the React team—it’s a third-party package.

So, there’s no "official" recommendation for state management. That said, you don’t necessarily need a state management library unless your use case requires more control over the tour's progress across different parts of your app.

What’s the Best Approach?

The best approach depends on how complex your state is:

• If you’re just tracking a few state variables (like the current step), you can keep it simple with useState in a parent component and pass props down.
• If the state needs to be accessed across different components that don’t have a direct relationship, then Context + a custom hook is a good lightweight solution.
  Here’s an example of how that works.
• If your app requires a more complex state, consider using something like Zustand or Redux to store the Joyride state there—but only if it makes sense for your needs.
  Zustand is much simpler than Redux and would be a great choice for handling global state.

---

❌ Why Window Listeners Aren’t the Best Approach

You're right that using window listeners to track toast messages isn’t efficient. The main issue is that it’s an imperative approach, whereas React encourages declarative patterns.

Instead of listening for global events, React components should react to state changes directly. This makes your app:

• More predictable (React only re-renders when state changes)
• Easier to debug (no hidden event listeners floating around)
• Less prone to memory leaks (listeners don't pile up over time)

---

🔄 Syncing Joyride with State Using callback

A better way to control Joyride’s progress is through its callback prop, which triggers every time a step changes. You can store the step state in useState, Context, or Zustand, depending on your needs.

Here’s an example using useState:

import { useState } from 'react';
import Joyride, { CallBackProps, EVENTS, STATUS } from 'react-joyride';

export default function TourExample() {
  const [stepIndex, setStepIndex] = useState(0);
  const [tourRunning, setTourRunning] = useState(true);

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { index, status, type } = data;

    if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
      setTourRunning(false); // End tour
      setStepIndex(0); // Reset the step index
    } else {
      setStepIndex(index + (type === EVENTS.STEP_AFTER ? 1 : -1)); // Move to previous/next step
    }
  };

  return (
    <div>
      <Joyride
        callback={handleJoyrideCallback}
        run={tourRunning}
        stepIndex={stepIndex}
        steps={[
          { target: '#step1', content: 'This is step 1' },
          { target: '#step2', content: 'This is step 2' },
        ]}
      />
      {/* your components here */}
    </div>
  );
}