[BUG] Word list container doesn't re-render when new words are added, so scroll bar doesn't show up immediately

[apmwebdev]

Description

The word list component uses a horizontal scroll container for word lists that contain too many words to fit in the default component UI. The scroll bar is dynamic, only showing up for lists that need it. While this is good in theory, the scroll bar does not work properly for lists that start out as not needing a scroll bar, and then have enough words added that they do need a scroll bar. However, if you click on a different word list tab and then click back to the broken one, it fixes it and adds the scroll bar properly.

I'm fairly certain this happens because the list is reading from and writing to the Redux store directly, so the scroll containers don't know about the state changes since they are further up in the component hierarchy, and therefore they don't re-render.

If this hypothesis is correct, the simplest fix would be to somehow loop in the word list data higher up in the component hierarchy so that the scroll containers would see the state changes in Redux and re-render properly when new words are added, thus (hopefully) adding scroll bars when they're necessary. Or, thinking about it from the opposite perspective, the fix would be to put the scroll containers lower in the component hierarchy.

Some testing is needed to determine the optimal design, but the re-rendering could be accomplished in a few ways.

1. Move the scroll container lower in the component hierarchy so that it can see the data. This is likely the simplest approach, if it's possible.
2. Pass in the word list data to a parent component and then prop drill it down to the actual word list, thus making the parent component aware of the state changes.
3. Somehow subscribe one of the parent containers to the relevant slice data as a dependency without actually rendering anything from it. Not sure if this is possible/considered best practice.

Assuming the first option isn't possible/optimal, there's also the question of which parent component should subscribe to the data for options 2 and 3. The horizontal scroll container is currently very simple and would have to be refactored in order to subscribe to external state changes, but this would be the most direct place (i.e., the component closest to the actual word list) to call the data. Alternatively, a further upstream parent component would need less customization, but would be further removed from where the data was actually needed.

To Reproduce

Steps to reproduce the behavior:

1. Go to a puzzle.
2. Add either correct or incorrect guesses to gradually fill up the known words or wrong guesses word lists, respectively. Note that once the words can no longer all be displayed at once, the right-most words start disappearing out of the view, with no indication that the list can be scrolled to see these hidden words.
3. Click on a different word list, the click back to the original, broken word list. Note that the scroll bar now appears correctly.

Expected Behavior

The scroll bar should appear as soon as it's needed.

Related Issues

This issue is part of the Refactor word lists issue, but it's worth tracking by itself since it can and should be fixed regardless of any refactoring.