Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use Internal Transitions in XState to Avoid State Exit and Re-Entry

    xstateXState
    >=4.6.7
    javascriptJavaScript

    Transitions come in two varieties: "external" and "internal". By default, a transition is considered external. This means that a transition will exit the current state node, and enter the next state node (even if that state node is the state the machine is currently in). This exit/enter loop will trigger any actions that are set on the exit and entry properties.

    A transition can be set to internal, either through setting a . (dot) in front of the state node name (as we do in this lesson), or through setting the property internal to true on the transition object.

    When a transition is internal, it will not exit and enter the state node, which means that the actions in the exit/transition/entry loop will not be called.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Here I have a contrived example of a machine, an idle machine, that only has one state, idle. On this machine, we only have one event, do-nothing. It transitions back to the idle state. Let's give it a couple tries.

    We can see that each time we call do-nothing, we actually exit the idle state. We leave it, calling the log exit action, which is down here in logs exited, and then we reenter the idle state, calling the entry action log entry that logs entered. Hence why, exited-entered, exited-entered, exited-entered.

    Now, on occasion, you might want to transition back to the same state without ever leaving the state node, and thus, never reentering the state node. How do we do that in XState?

    Well, we can do it quite simply by adding one character. We add this period, this dot notation, and what we've told the machine is that we would like to make an internal transition.

    We want to make a transition that stays within the state it's in. We don't want to exit it and we don't want to enter it, so we're going to update our machine.

    Notice that the arrow slightly changed. If we call do-nothing now, we'll see that nothing gets logged out to the terminal. I hope you can hear me clicking.

    This simple change creates a transition where we never leave this node.