Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Proposal] Selective Render with useContext #26890

Closed
eduardocque opened this issue Jun 2, 2023 · 2 comments
Closed

[Proposal] Selective Render with useContext #26890

eduardocque opened this issue Jun 2, 2023 · 2 comments
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@eduardocque
Copy link

eduardocque commented Jun 2, 2023

Ability to do selective renders with useContext to improve the performance for large applications

following the next pattern

const TestContext = createContext();
...
const proposalCallback = useCallback(
    (prevState, nextState) => {
      // If the value is different, then re-render
      // if this method is defined will return true/false
      // if this method doesn't exist, will keeps working in the current way re-rendering everytime so this one is optional


      return "evaluate prev and next state and based on your logic return true or false";
    },
    []
  );

  // Proposal callback applied here
  const dataContext = useContext(TestContext, proposalCallback);

React version: 18.2.0

Steps To Reproduce

  • open console log
  • write in the first field and u will notice that field 2 is re-rendering, we should skip it

https://codesandbox.io/s/friendly-bas-5vnrvs

The current behavior

all context consumers are re-rendering
image

The expected behavior

should only re-render those that were affected using the proposal that is in codesandbox

Note

this proposal is to give a big improvement in performance for large application that works based on contexts, so instead be making granual contexts, why not give the ability to check if the value that is expecting the consumer change or not

this can be implemented in the logic that process the nodes and takes the decision to re-render or not internally in react, but im not familiar to try to make a PR for this proposal

Updated:

after some research the files that needs to be updated are

  • packages/react-reconciler/src/ReactFiberNewContext.js -> propagateContextChange

is this correct ?

noticed that when the provider Fiber gets updated this sends the signal to invalidate all consumers located in the child tree inside the provider

@eduardocque eduardocque added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jun 2, 2023
@eduardocque eduardocque changed the title [Proposal] Selective Render with useContext (client side and SSR) [Proposal] Selective Render with useContext Jun 3, 2023
Copy link

github-actions bot commented Apr 9, 2024

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 9, 2024
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

1 participant