From eb155c848f4ea1796ec96a6a88be0304d5d5ddf4 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 4 Jan 2023 20:18:10 +0200 Subject: [PATCH 1/2] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9b405f6..0ec7b66 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# React Next Context +# Next Context Next Context is a performance optimized subscriber with same React Context API design. From e82b2238174fb2df85f6f44586352ce4231596d9 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 5 Jan 2023 21:15:57 +0200 Subject: [PATCH 2/2] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 0ec7b66..4c1bad8 100755 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ Next Context is a performance optimized subscriber with same React Context API design. -There's a performance issue in using React Context when the value of `Context.Provider` mutating all subscribers using `useContext` will re-render even if the component wasn't using the same mutated value because the `useContext` retrieves a object any mutations to that object leads to create a new one with different reference and cause re-rendering for all subscribe hooks, there's no any way to select specific value in the React Context. +There's a performance issue in using React Context when the value of `Context.Provider` mutating all consumers using `useContext`, will re-render even if the component wasn't use the mutated value because the `useContext` retrieves a object any mutations to that object leads to create a new one with different reference and cause re-rendering, there's no any way to select specific value in the React Context. -We solved that problem by adding another hook `useContextSelector` gives us ability to split the object to values by selector, don't affect on each other when mutate them and the component will re-render if the value of context selector is changed. +We solved that problem by adding another hook `useContextSelector` gives ability to select specific value by selector, don't render on each mutatation and the component will re-render just if the value of context selector is changed. ## Install @@ -71,13 +71,13 @@ function LastName() { ### When should we use Next Context instead of original Context API? -Frankly React Context is not designed for state that changing constantly because it'll destroy the perforamance and always adequate for global state that don't mutate in the runtime like theme variables, while Next Context designed to solve that performance issue, so if you want to use Context API and state was changing after initial rendering the Next Context would ideal. +React Context isn't designed for state that change constantly because will destroy the perforamance and always adequate for global state that don't chnage in the runtime like theme variables, while Next Context designed to solve that performance issue, so if you want to use Context API to pass state and state was change the Next Context would ideal. ### Can we do deep comparison for consumers selector hooks? -When we designed the selector hook we kept it open to accept any compatator function the user want. +When we designed the selector hook we kept it open to accept any comparator function the user want. -Example using `_.isEmpty` from Lodash. +Example using `_.isEmpty` from `Lodash`. ```typescript const useContextDeepSelector = ( @@ -90,7 +90,7 @@ const useContextDeepSelector = ( `createNextContext(defaultValue: Value)` -Creates a Context object and retrieves Context object with Provider. +Creates and retrieves a Context object with `Provider` component. Parameters: @@ -100,14 +100,14 @@ Parameters: `useContextSelector(context, selector, comparator)` -Retreives the context value by selector. Can only work if there's above it and only re-render if that selected value is referentially changed. +Retreives the context value by selector. Can only work if there's Provider above it and only re-render if that selected value is referentially changed. Note: You can do shallow comparison for objects values by passing `_.isEqual` or any equalivent function to the third param of the hook. Parameters: -- `context` React.Context - The context object. -- `selector` (value: Value) => Output - The context value selector. +- `context`: React.Context - The context object. +- `selector`: (value: Value) => Output - The context value selector. - `comparator`: (value1: any, value2: any) => boolean - The comparator to detarmine when the hook should re-render. ---