How to use the rax.useMemo function in rax

To help you get started, we’ve selected a few rax examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
function ConnectFunction(props) {
      const [propsContext, forwardedRef, wrapperProps] = useMemo(() => {
        // Distinguish between actual "data" props that were passed to the wrapper component,
        // and values needed to control behavior (forwarded refs, alternate context instances).
        // To maintain the wrapperProps object reference, memoize this destructuring.
        const { forwardedRef, ...wrapperProps } = props;
        return [props.context, forwardedRef, wrapperProps];
      }, [props]);

      const ContextToUse = useMemo(() => {
        // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
        // Memoize the check that determines which context instance we should use.
        return propsContext &&
          propsContext.Consumer
          // && isContextConsumer()
          ? propsContext
          : Context;
      }, [propsContext, Context]);

      // Retrieve the store and ancestor subscription via context, if available
      const contextValue = useContext(ContextToUse);

      // The store _must_ exist as either a prop or in context
      const didStoreComeFromProps = Boolean(props.store);
      const didStoreComeFromContext =
        Boolean(contextValue) && Boolean(contextValue.store);
github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
);

        // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
        // the middle of the notification loop, where `subscription` will then be null. This can
        // probably be avoided if Subscription's listeners logic is changed to not call listeners
        // that have been unsubscribed in the  middle of the notification loop.
        const notifyNestedSubs = subscription.notifyNestedSubs.bind(
          subscription
        );

        return [subscription, notifyNestedSubs];
      }, [store, didStoreComeFromProps, contextValue]);

      // Determine what {store, subscription} value should be put into nested context, if necessary,
      // and memoize that value to avoid unnecessary context updates.
      const overriddenContextValue = useMemo(() => {
        if (didStoreComeFromProps) {
          // This component is directly subscribed to a store from props.
          // We don't want descendants reading from this store - pass down whatever
          // the existing context value is from the nearest connected ancestor.
          return contextValue;
        }

        // Otherwise, put this component's subscription instance into context, so that
        // connected descendants won't update until after this component is done
        return {
          ...contextValue,
          subscription
        };
      }, [didStoreComeFromProps, contextValue, subscription]);

      // We need to force this wrapper component to re-render whenever a Redux store update
github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
}
        };

        return unsubscribeWrapper;
      }, [store, subscription, childPropsSelector]);

      // Now that all that's done, we can finally try to actually render the child component.
      // We memoize the elements for the rendered child component as an optimization.
      const renderedWrappedComponent = useMemo(
        () => ,
        [forwardedRef, WrappedComponent, actualChildProps]
      );

      // If React sees the exact same element reference as last time, it bails out of re-rendering
      // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
      const renderedChild = useMemo(() => {
        if (shouldHandleStateChanges) {
          // If this component is subscribed to store updates, we need to pass its own
          // subscription instance down to our descendants. That means rendering the same
          // Context instance, and putting a different value into the context.
          return (
            
              {renderedWrappedComponent}
            
          );
        }

        return renderedWrappedComponent;
      }, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);

      return renderedChild;
    }
github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
// The store _must_ exist as either a prop or in context
      const didStoreComeFromProps = Boolean(props.store);
      const didStoreComeFromContext =
        Boolean(contextValue) && Boolean(contextValue.store);

      invariant(
        didStoreComeFromProps || didStoreComeFromContext,
        'Could not find "store" in the context of ' +
          `"${displayName}". Either wrap the root component in a , ` +
          'or pass a custom React context provider to  and the corresponding ' +
          `React context consumer to ${displayName} in connect options.`
      );

      const store = props.store || contextValue.store;

      const childPropsSelector = useMemo(() => {
        // The child props selector needs the store reference as an input.
        // Re-create this selector whenever the store changes.
        return createChildSelector(store);
      }, [store]);

      const [subscription, notifyNestedSubs] = useMemo(() => {
        if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY;

        // This Subscription's source should match where store came from: props vs. context. A component
        // connected to the store via props shouldn't use subscription from context, or vice versa.
        const subscription = new Subscription(
          store,
          didStoreComeFromProps ? null : contextValue.subscription
        );

        // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
if (lastThrownError) {
            // It's possible that we caught an error due to a bad mapState function, but the
            // parent re-rendered without this component and we're about to unmount.
            // This shouldn't happen as long as we do top-down subscriptions correctly, but
            // if we ever do those wrong, this throw will surface the error in our tests.
            // In that case, throw the error from here so it doesn't get lost.
            throw lastThrownError;
          }
        };

        return unsubscribeWrapper;
      }, [store, subscription, childPropsSelector]);

      // Now that all that's done, we can finally try to actually render the child component.
      // We memoize the elements for the rendered child component as an optimization.
      const renderedWrappedComponent = useMemo(
        () => ,
        [forwardedRef, WrappedComponent, actualChildProps]
      );

      // If React sees the exact same element reference as last time, it bails out of re-rendering
      // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
      const renderedChild = useMemo(() => {
        if (shouldHandleStateChanges) {
          // If this component is subscribed to store updates, we need to pass its own
          // subscription instance down to our descendants. That means rendering the same
          // Context instance, and putting a different value into the context.
          return (
            
              {renderedWrappedComponent}
            
          );
github alibaba / rax / packages / rax-redux / src / components / connectAdvanced.js View on Github external
didStoreComeFromProps || didStoreComeFromContext,
        'Could not find "store" in the context of ' +
          `"${displayName}". Either wrap the root component in a , ` +
          'or pass a custom React context provider to  and the corresponding ' +
          `React context consumer to ${displayName} in connect options.`
      );

      const store = props.store || contextValue.store;

      const childPropsSelector = useMemo(() => {
        // The child props selector needs the store reference as an input.
        // Re-create this selector whenever the store changes.
        return createChildSelector(store);
      }, [store]);

      const [subscription, notifyNestedSubs] = useMemo(() => {
        if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY;

        // This Subscription's source should match where store came from: props vs. context. A component
        // connected to the store via props shouldn't use subscription from context, or vice versa.
        const subscription = new Subscription(
          store,
          didStoreComeFromProps ? null : contextValue.subscription
        );

        // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
        // the middle of the notification loop, where `subscription` will then be null. This can
        // probably be avoided if Subscription's listeners logic is changed to not call listeners
        // that have been unsubscribed in the  middle of the notification loop.
        const notifyNestedSubs = subscription.notifyNestedSubs.bind(
          subscription
        );
github alibaba / rax / packages / rax-server-renderer / src / __tests__ / hooks.js View on Github external
function CapitalizedText(props) {
        const text = props.text;
        const capitalizedText = useMemo(
          () => {
            return text.toUpperCase();
          },
          [text],
        );
        return
github alibaba / rax / packages / rax-server-renderer / src / __tests__ / hooks.js View on Github external
function CapitalizedText(props) {
        const computed = useMemo(props.compute);
        return
github alibaba / rax / packages / rax-use-import / src / index.js View on Github external
export default function useImport(create, args) {
  let [mod, error] = usePromise(
    useMemo(create, [args])
  );

  if (mod) {
    mod = mod.__esModule ? mod.default : mod;
  }

  return [mod, error];
}
github alibaba / rax / packages / rax-redux / src / components / Provider.js View on Github external
function Provider({ store, context, children }) {
  const contextValue = useMemo(() => {
    const subscription = new Subscription(store);
    subscription.onStateChange = subscription.notifyNestedSubs;
    return {
      store,
      subscription
    };
  }, [store]);

  const previousState = useMemo(() => store.getState(), [store]);

  useEffect(() => {
    const { subscription } = contextValue;
    subscription.trySubscribe();

    if (previousState !== store.getState()) {
      subscription.notifyNestedSubs();