Skip to content
This repository has been archived by the owner on Jul 15, 2021. It is now read-only.

Utilize multiple contexts for performance #21

Closed
jamesplease opened this issue Jun 28, 2019 · 2 comments · Fixed by #26
Closed

Utilize multiple contexts for performance #21

jamesplease opened this issue Jun 28, 2019 · 2 comments · Fixed by #26
Labels
enhancement New feature or request

Comments

@jamesplease
Copy link
Owner

Consider the following:

  • Subtree A is focused
  • Subtree A root has a hook checking if it is focused
  • Subtree B is changing dynamically based on user input, and many, many focusable elements are being created/destroyed

In this situation, Subtree B is changing the global context (because the focus tree nodes are changing), causing Subtree A to render unnecessarily.

The focus hierarchy state should be separate from the node state. That way, consumers of what's focused won't be affected by changes to the rest of the focus tree state.

@jamesplease jamesplease changed the title Multiple contexts Utilize multiple contexts for performance Jun 28, 2019
@jamesplease jamesplease added the enhancement New feature or request label Jun 28, 2019
@jamesplease
Copy link
Owner Author

This change may still cause A to rerender because A subscribes to get its own node within a Focusable component.

@jamesplease
Copy link
Owner Author

jamesplease commented Jul 9, 2019

A more appropriate solution is described here: reactjs/rfcs#119

However, since that is just an RFC, I'll likely move to:

  1. passing down the entire tree through Context, which will never re-render
  2. storing Node information in state within the custom hooks/Focusable component
  3. syncing that state using a selector approach

Each hook/Focusable will subscribe to the Focus Tree rather than Context. In this way, re-renders will be minimized considerably.

If the selector RFC ever lands, I can refactor back to using Context in a less roundabout way.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant