Connections: Avoid creating component during rendering & remove non-reusable hook #40347
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This builds on top of #40249.
While trying to fix keyboard navigation (which I ultimately didn't do), I noticed that dynamically creating components like this completely messes up how React keeps track of element focus:
teleport/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
Lines 72 to 91 in 944085f
This is because there's a new anonymous component created on every render. So then I refactored it into a proper standalone component. But then I ran into another problem: I had two different components calling
useConnections
, but that hook wasn't meant to be reusable.In the end, I added some tests to capture the behavior of
useConnections
and then I got rid of the hook. I managed to replaceuseEffect
withuseState
and updating a component during rendering. Check out the changes related toupdateSorting
.Removing this hook is going to be useful since in the future I'll move closing/opening the connection list to a context so that I can control it outside of the component itself. This way when you want to start VNet we'll be able to automatically show the VNet panel.