Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
 into main
  • Loading branch information
abouolia committed Jan 5, 2023
2 parents 098d8f9 + e82b223 commit f60340f
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# React Next Context
# Next Context

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

Expand Down Expand Up @@ -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 = <Value, Output>(
Expand All @@ -90,7 +90,7 @@ const useContextDeepSelector = <Value, Output>(

`createNextContext<Value>(defaultValue: Value)`

Creates a Context object and retrieves Context object with Provider.
Creates and retrieves a Context object with `Provider` component.

Parameters:

Expand All @@ -100,14 +100,14 @@ Parameters:

`useContextSelector<Value, Output>(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.

---
Expand Down

0 comments on commit f60340f

Please sign in to comment.