Refactor out zustand from select dropdown

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/itsjonq/g2/ijkymhyrt
✅ Preview: https://g2-git-refactor-select-dropdown-reducer.itsjonq.vercel.app

sarayourfriend commented 3 years ago

There's something wrong with this, however, as setCommitValue causes an infinite loop. I've been debugging this for two hours and have made zero headway so pushing this up so I can focus on something else for a little bit and come back to this later.

ItsJonQ commented 3 years ago

🤗 I just gave it a shot... no dice :(.

My hunch is that there's something with this from zustand:

    const { commitValue } = store(
        (state) => ({ commitValue: state.commitValue }),
        shallowCompare,
    );

The store() (basically a hook) would only (force) update if the returned value is different, which can be tested with the final argument (shallowCompare). Perhaps this equality check prevented things from going infinite loop.

I tried this in your refactored version by using a couple of ref for values. I wasn't able to get it to work.

Alternatively, we could adjust the props <-> reducer state <-> downshift flow if this setup isn't work correctly.

As long as we're able to achieve the same features, that is for the component to be able to be controlled (synced) with preview/reset.

P.S. Zustand made all of this easier 😭 (IMO at least). But maybe... the strategy I previously had wasn't right? And zustand hid that mistake? Unsure 🤔

sarayourfriend commented 3 years ago

I think it's a race condition. If you console.log commitValue and value where setCommitValue is called in the useUpdateEffect you'll notice that it gets passed the previous value each time, which is then committed becuase it doesn't match the committed value. This repeats, with the previous committed value being passed in as value each time.

I've traced the flow of data through this component many times and haven't been able to pinpoint how this is happening. It seems like it should work just fine.

ItsJonQ / g2

Refactor out zustand from select dropdown #230