Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
abouolia authored Jan 3, 2023
1 parent 3b0869f commit 0da33b5
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Next Context is a performance optimized subscriber with same React Context API d

There's a performance issue in using React Context when the `Context.Provider` value mutating all subscribers using `useContext` will re-render even if the component wasn't using that 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 hooks, 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 just if the value of context selector is changed.
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.

## Install

Expand All @@ -24,20 +24,21 @@ Depends on `react` as

Creates a Context object and retrieves Context object with Provider.

**Parameters:**
* `defaultValue` any - Any default value to the context.
Parameters:
- `defaultValue` any - Any default value to the context.

---

`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. <br />
Note: You can do shallow comparison for objects values by passing `_.isEqual` or any equalivent function to the third param of the hook.
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.

---
Note: You can do shallow comparison for objects values by passing _.isEqual or any equalivent function to the third param of the hook.

**Parameters:** <br />
* `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.
Parameters:
- `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 0da33b5

Please sign in to comment.