npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@air/react-memoized-context

v1.0.0

Published

<h1 align="center">React Memoized Context</h1> <p align="center"><i>React Context with Redux-like performance and patterns without installing Redux.</i></p>

Downloads

1,189

Readme

✨ Features

  • Use your React Context without the additional re-renders in the consumers
  • Ability to read values out of context "on-the-fly" - useful in callbacks so you don't have to bind the UI to a context value change just to use the value in a callback
  • Redux-like pattern (reducer, actions, and selectors)
  • Built with TypeScript

About

Here at Air, we needed a way to store multiple instances of complex global state (what React Context API does) but with the performance of Redux. react-memoized-context solves this problem.

Why not React Context?

A React Context provider renders all consumers every time it's value changes - even if the component isn't using a property on the value (if it's an object). This can cause lots of performance issues and the community is trying to solve it. We've looked at these other solutions but they're either not ready, had too many bugs or lacked features (like reading values on the fly) so we decided to roll our own.

Why not Redux?

Redux is great as a global store when multiple components want to read and write to a single centralized value. But when you want to have multiple global values with the same structure, Redux isn't as flexible because you need to duplicate your reducers, actions, and selectors. That's where React Context is nice because you can just wrap around another Provider.

Install

npm install --save @air/react-memoized-context
yarn add @air/react-memoized-context

Usage

  1. Create types for your context:

    • create type for value, which you want to store:
      export interface User {
        id: string;
        name: string;
        score: number;
      }
        
      export interface UsersTeamContextValue {
        users: User[];
      }
    • create type for actions you want to provide to update value:
      export interface UsersTeamContextActions {
        addUser: (user: User) => void;
        assignScore: (userId: User['id'], score: number) => void;
      }
    • create type for your context - remember to extend MemoizedContextType:
      export interface UsersTeamContextType extends MemoizedContextType<UsersTeamContextValue>, UsersTeamContextActionsType {}
    • create default value for your context:
      export const defaultUsersTeamContextValue: UsersTeamContextType = {
        ...defaultMemoizedContextValue,
        getValue: () => ({
          users: [],
        }),
        addUser: () => {},
        assignScore: () => {},
       };
    • create types for your actions - you will use them to modify context value:
      export interface AddUserAction extends MemoizedContextAction {
        type: 'addUser';
        data?: { user: User };
      }
        
      export interface AssignScoreAction extends MemoizedContextAction {
        type: 'assignScore';
        data?: { userId: User['id']; score: number };
      }
        
      export type UserTeamContextActions = AddUserAction | AssignScoreAction;
  2. Create your context:

    const UsersTeamContext = createContext<UsersTeamContextType>(defaultUsersTeamContextValue);
       
    const useUsersTeamContext = () => useContext(UsersTeamContext);
  3. Create your dispatch method. It should work as redux dispatch - takes an action, modifies state value and returns a new state:

    export const usersTeamContextDispatch = (state: UsersTeamContextValue, action: UserTeamContextActions) => {
      switch (action.type) {
        case 'assignScore':
          return {
            ...state,
            users: state.users.map((user) => {
              if (user.id === action.data?.userId) {
                return {
                  ...user,
                  score: action.data?.score ?? 0,
                };
              }
              return user;
            }),
          };
        case 'addUser':
          return {
            ...state,
            users: action.data ? [...state.users, action.data.user] : state.users,
          };
      }
    };
  4. Create your provider:

    export const UsersTeamProvider = ({ children }: PropsWithChildren<{}>) => {
         
      const { contextValue } = useMemoizedContextProvider<UsersTeamContextValue>(
        // provide default value for your context
        {
          users: [],
        },
        usersTeamContextDispatch,
      );
       
      // create methods you want to expose to clients
      const addUser = useCallback((user: User) => contextValue.dispatch({ type: 'addUser', data: { user } }), [contextValue]);
       
      const assignScore = useCallback(
        (userId: User['id'], score: number) => contextValue.dispatch({ type: 'assignScore', data: { userId, score } }),
        [contextValue],
      );
       
      // memoize your final value that will be available for clients
      // just return what's in contextValue and add your methods
      const value = useMemo<UsersTeamContextType>(
        () => ({
          ...contextValue,
          addUser,
          assignScore,
        }),
        [addUser, assignScore, contextValue],
      );
       
      return <UsersTeamContext.Provider value={value}>{children}</UsersTeamContext.Provider>;
    };
  5. To retrieve data from context, you need selectors:

    export const usersTeamUsersSelector = (state: UsersTeamContextValue) => state.users;

    usage in component:

    const context = useUsersTeamContext();
    // pass context to useMemoizedContextSelector
    const users = useMemoizedContextSelector(context, usersTeamUsersSelector);

    to simplify it, you can create a helper:

    export function useUsersTeamContextSelector<T>(selector: (st: UsersTeamContextValue) => T) {
      const context = useUsersTeamContext();
      return useMemoizedContextSelector(context, selector);
    }
       

    then, to retrieve users from context you can do:

    const users = useUsersTeamContextSelector(usersTeamUsersSelector);
  6. Start using your context!

    Wrap your components with your Provider component, as you do with React Context:

    <UsersTeamProvider>
        <UsersTeam name="Team 1" />
    </UsersTeamProvider>

    To modify context value, use any of your actions:

    import { useUsersTeamContextSelector } from "./usersTeamContext";
       
    const { addUser } = useUsersTeamContext()
       
    const onClick = () => {
      addUser({ name: 'John' })
    }
       

    You can read context values on the fly if you need. For example, we will create a user with users.length as id. We can use usersTeamUsersSelector, but the component would be rerendered every time when any user changes. We don't want that - we need just users length. We could create a selector that gets users length, but again - everytime we add a user, the component will rerender. For us, it's enough to know users length by the time we create a user:

     // get whole context value - it will not cause any rerender!
     const contextValue = useUsersTeamContext();
       
      const addNewUser = () => {
        // read users array when we need it
        const users = contextValue.getValue().users;
        // call addUser action to add a new user
        contextValue.addUser({ id: users.length + 1, name: userName, score: 0 });
      };