संदर्भ प्रकारों की देखभाल न करने की युक्ति आसान है!

यदि आप संदर्भ एपीआई का उपयोग करते हैं, तो एक समस्या इसके प्रकारों की बच्चों की देखभाल है।

दूसरे को जरूरत पड़ने पर इसका उपयोग करने के लिए कई आयातों का उपयोग करना पड़ रहा है।

इस उदाहरण के साथ, हम दोनों समस्याओं का समाधान करते हैं और रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करना त्वरित और आसान बनाते हैं।

कॉपी पेस्ट उदाहरण

कॉपी करें, पेस्ट करें, फिर सभी "उदाहरण" को उस नाम से बदलें जिसे आप नाम देना चाहते हैं और आप जाने के लिए तैयार हैं।

(बाद में, एक पूर्ण टिप्पणी वाला संस्करण होगा।)

import {
  createContext,
  useCallback,
  useContext,
  useDeferredValue,
  useMemo,
  useState,
} from 'react';

function useContextValue(init: number = 0) {
  const [state, setState] = useState(init);

  const doubleValue = state * 2;
  const defferedStringValue = useDeferredValue(state.toString());

  const reset = useCallback(() => {
    setState(init);
  }, []);

  const value = useMemo(
    () => ({
      state,
      doubleValue,
      defferedStringValue,
      reset,
    }),
    [
      state,
      doubleValue,
      defferedStringValue,
      reset,
    ],
  );

  return value;
}

type ExampleContext = ReturnType;

const Context = createContext(null!);

Context.displayName = 'ExampleContext';

export function ExampleContextProvider({
  children,
  initValue = 0,
}: {
  children: React.ReactNode;
  initValue?: number;
}) {
  const value = useContextValue(initValue);
  return {children};
}

export function useExample() {
  const value = useContext(Context);

  if (!value) {
    throw new Error('useExample must be used within a ExampleContextProvider');
  }

  return value;
}

टिप्पणी संस्करण

import {
  createContext,
  useCallback,
  useContext,
  useDeferredValue,
  useMemo,
  useState,
} from 'react';

/**
 * We create a custom hook that will have everything
 * that would usually be in the context main function
 *
 * this way, we can use the value it returns to infer the
 * type of the context
 */
function useContextValue(init: number = 0) {
  // do whatever you want inside

  const [state, setState] = useState(init);

  const doubleValue = state * 2;
  const defferedStringValue = useDeferredValue(state.toString());

  // remember to memoize functions
  const reset = useCallback(() => {
    setState(init);
  }, []);

  // and also memoize the final value
  const value = useMemo(
    () => ({
      state,
      doubleValue,
      defferedStringValue,
      reset,
    }),
    [
      state,
      doubleValue,
      defferedStringValue,
      reset,
    ],
  );

  return value;
}

/**
 * Since we can infer from the hook,
 * no need to create the context type by hand
 */
type ExampleContext = ReturnType;

const Context = createContext(null!);

Context.displayName = 'ExampleContext';

export function ExampleContextProvider({
  children,
  /**
   * this is optional, but it's always a good to remember
   * that the context is still a react component
   * and can receive values other than just the children
   */
  initValue = 0,
}: {
  children: React.ReactNode;
  initValue?: number;
}) {
  const value = useContextValue(initValue);
  return {children};
}

/**
 * We also export a hook that will use the context
 *
 * this way, we can use it in other components
 * by importing just this one hook
 */
export function useExample() {
  const value = useContext(Context);

  /**
   * this will throw an error if the context
   * is not used within the provider
   *
   * this also avoid the context being "undefined"
   */
  if (!value) {
    throw new Error('useExample must be used within a ExampleProvider');
  }

  return value;
}

अंतिम शब्द

इतना ही। कॉन्टेक्स्ट एपीआई अपेक्षा से अधिक आसान और अधिक परिष्कृत है, लेकिन यह उन मामलों के लिए एक शक्तिशाली उपकरण है जहां इसका उपयोग करने की आवश्यकता है।

बस याद रखें कि रिएक्ट कॉन्टेक्स्ट एपीआई Redux (या अन्य राज्य प्रबंधक) नहीं है और आपको इसमें संपूर्ण एप्लिकेशन स्थिति नहीं डालनी चाहिए।

ठीक है, आप कर सकते हैं, लेकिन यह अनावश्यक समस्याएं पैदा कर सकता है।

यह रिएक्ट