react#useDebugValue TypeScript Examples

useControlledState = <T>(
  outterState: T | (() => T) | undefined,
  defaultOutterState: T,
  callback?: (state: T | (() => T)) => void
): [T, (state: T | (() => T), force?: boolean) => void] => {
  // if (outterState === undefined && defaultOutterState === undefined) {
  //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
  // }
  const [innerState, setInnerState] = useState<T>(isUndefined(outterState) ? defaultOutterState : outterState);
  const setState = useRef((state: T | (() => T), force = false) => {
    if (isUndefined(outterState) || force) {
      setInnerState(state);
    }

    callback?.(state);
  }).current;

  useDebugValue([innerState, outterState], format);

  useEffect(() => {
    if (!isUndefined(outterState)) {
      setInnerState(outterState);
    }
  }, [outterState]);

  return [innerState, setState];
}

function useDMConverseActions(): QuickAction[] {
  const userId = useUserId();
  const dmConverses = useAppSelector((state) =>
    Object.values(state.chat.converses).filter(
      (converse) => converse.type === ChatConverseType.DM
    )
  );
  const { value: personalConverseActions = [] } = useAsync(async () => {
    if (!isValidStr(userId)) {
      return [];
    }

    return Promise.all(
      dmConverses.map((converse) =>
        getDMConverseName(userId, converse).then(
          (converseName): QuickAction => ({
            key: `qs#converse#${converse._id}`,
            label: `${t('私信')} ${converseName}`,
            source: 'core',
            action: ({ navigate }) => {
              navigate(`/main/personal/converse/${converse._id}`);
            },
          })
        )
      )
    );
  }, [userId, dmConverses.map((converse) => converse._id).join(',')]);

  useDebugValue(personalConverseActions);

  return personalConverseActions;
}

export default function useComponentFile(displayValue: string, fullValue: string) {
    useDebugValue(displayValue);
    useRef(fullValue.replace(/:origin/g, location.origin));
}

function useStore<Store extends object, R> ( store: Store | Store[], selector: (( store: Store ) => R) | (( ...stores: Store[] ) => R) = SELECTOR_IDENTITY, comparator?: (( dataPrev: Exclude<R, Primitive>, dataNext: Exclude<R, Primitive> ) => boolean) | any[], dependencies?: any[] ): Store | Store[] | R {

  if ( !dependencies && !comparator ) return useStore ( store, selector, COMPARATOR_FALSE, EMPTY_ARRAY );

  if ( !dependencies ) {

    if ( typeof comparator === 'function' ) return useStore ( store, selector, comparator, EMPTY_ARRAY );

    return useStore ( store, selector, COMPARATOR_FALSE, comparator );

  }

  const stores = Utils.isStores ( store ) ? store : [store];

  if ( !stores.length ) throw Errors.storesEmpty ();

  const mountedRef = useRef ( false ),
        storesRef = useRef<Store[] | undefined> (),
        storesMemo = ( storesRef.current && areShallowEqual ( storesRef.current, stores ) ) ? storesRef.current : stores,
        selectorMemo = useCallback ( selector, dependencies ),
        selectorRef = useRef ( selectorMemo ), // Storing a ref so we won't have to resubscribe if the selector changes
        comparatorMemo = useCallback ( comparator as any, dependencies ), //TSC
        comparatorRef = useRef ( comparatorMemo ), // Storing a ref so we won't have to resubscribe if the comparator changes
        changesCountersRendering = useMemo ( () => ChangesCounters.getMultiple ( storesMemo ), [storesMemo] ), // Storing the number of changes at rendering time, in order to understand if changes happened before now and commit time
        valueRef = useRef<R> ( undefined as any ), // Using a ref in order not to trigger *any* unnecessary re-renders //TSC
        setUpdateId = useState<symbol> ()[1], // Dummy state used for triggering updates
        forceUpdate = useCallback ( () => setUpdateId ( Symbol () ), [] );

  if ( storesRef.current !== storesMemo || selectorRef.current !== selectorMemo || comparatorRef.current !== comparatorMemo ) {

    storesRef.current = storesMemo;
    selectorRef.current = selectorMemo;
    comparatorRef.current = comparatorMemo;

    const value = selectorMemo.apply ( undefined, storesMemo );

    if ( !Object.is ( value, valueRef.current ) ) {

      valueRef.current = value;

    }

  }

  useDebugValue ( valueRef.current );

  useEffect ( () => {

    mountedRef.current = true;

    return () => {

      mountedRef.current = false;

    };

  }, [] );

  useEffect ( () => {

    /* COUNTERS */ // Checking if something changed while we weren't subscribed yet, updating

    const changesCounterMounting = ChangesCounters.getMultiple ( storesMemo );

    if ( !Utils.isEqual ( changesCountersRendering, changesCounterMounting ) ) {

      const value = selectorRef.current.apply ( undefined, storesMemo );

      if ( !Object.is ( value, valueRef.current ) ) {

        valueRef.current = value;

        forceUpdate ();

      }

    }

    /* SUBSCRIPTION */

    return onChange ( storesMemo, ( ...stores ) => selectorRef.current.apply ( undefined, stores ), ( dataPrev, dataNext ) => comparatorRef.current.call ( undefined, dataPrev, dataNext ), ( ...values ) => {

      if ( !mountedRef.current ) return;

      const value = values.length > 1 ? values : values[0];

      valueRef.current = value;

      forceUpdate ();

    });

  }, [storesMemo, changesCountersRendering] );

  return valueRef.current;

}