Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@fluentui/react-context-selector
Advanced tools
Readme
@fluentui/react-context-selector
React useContextSelector()
and useContextSelectors()
hooks in userland.
React Context and useContext()
is often used to avoid prop drilling,
however it's known that there's a performance issue. When a context value is changed, all components that are subscribed with useContext()
will re-render.
useContextSelector is recently proposed. While waiting for the process, this library provides the API in userland.
NPM
npm install --save @fluentui/react-context-selector
Yarn
yarn add @fluentui/react-context-selector
import * as React from 'react';
import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';
interface CounterContextValue {
count1: number;
count2: number;
incrementCount1: () => void;
incrementCount2: () => void;
}
// 💡 The same syntax as native React context API
// https://reactjs.org/docs/context.html#reactcreatecontext
const CounterContext = createContext<CounterContextValue>({});
const CounterProvider = CounterContext.Provider;
// not necessary but can be a good layer to mock for unit testing
const useCounterContext = <T>(selector: ContextSelector<CounterCountext, T>) =>
useContextSelector(CounterContext, selector);
const Counter1 = () => {
// 💡 Context updates will be propagated only when result of a selector function will change
// "Object.is()" is used for internal comparisons
const count1 = useCounterContext(context => context.count1);
const increment = useCounterContext(context => context.incrementCount1);
return <button onClick={increment}>Counter 1: {count1}</button>;
};
const Counter2 = () => {
const count1 = useCounterContext(context => context.count2);
const increment = useCounterContext(context => context.incrementCount2);
return <button onClick={increment}>Counter 1: {count1}</button>;
};
export default function App() {
const [state, setState] = React.useState({ count1: 0, count2: 0 });
const incrementCount1 = React.useCallback(() => setState(s => ({ ...s, count1: s.count1 + 1 })), [setState]);
const incrementCount2 = React.useCallback(() => setState(s => ({ ...s, count2: s.count2 + 1 })), [setState]);
return (
<div className="App">
<CounterProvider
value={{
count1: state.count1,
count2: state.count2,
incrementCount1,
incrementCount2,
}}
>
<Counter1 />
<Counter2 />
</CounterProvider>
</div>
);
}
This helper hook will allow you to know if a component is wrapped by a context selector provider
const Foo = () => {
// An easy way to test if a context provider is wrapped around this component
// since it's more complicated to compare with a default context value
const isWrappedWithContext = useHasParentContext(CounterContext);
if (isWrappedWithContext) {
return <div>I am inside context selector provider</div>;
} else {
return <div>I can only use default context value</div>;
}
};
React context by nature triggers propagation of component re-rendering if a value is changed. To avoid this, this library uses undocumented feature of calculateChangedBits
. It then uses a subscription model to force update when a component needs to re-render.
children
of a context provider has to be either created outside of the provider or memoized with React.memo
.<Consumer />
components are not supported.The implementation is heavily inspired by:
FAQs
React useContextSelector hook in userland
The npm package @fluentui/react-context-selector receives a total of 413,868 weekly downloads. As such, @fluentui/react-context-selector popularity was classified as popular.
We found that @fluentui/react-context-selector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.