Pinned Loading

1. useIsMounted.js useIsMounted.js

   1

   import { useRef } from 'react';

   2

   3

   function useIsMounted() {

   4

     const isMounted = useRef(false);

   5

2. useSafeState.js useSafeState.js

   1

   function useSafeState(initValue) {

   2

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

   3

     const isMounted = useIsMounted();

   4

   5

     // useCallback because we need to add updateState function to effect deps

3. triggerNativeEventFor.ts triggerNativeEventFor.ts

   1

   type EventData = {

   2

     event: string;

   3

   } & Record<string, unknown>;

   4

   5

   const triggerNativeEventFor = (elm: Element, { event, ...valueObj }: EventData) => {

4. useIsFirstRender.ts useIsFirstRender.ts

   1

   import { useEffect, useRef } from 'react';

   2

   3

   export function useIsFirstRender(): boolean {

   4

     const isFirstRender = useRef(true);

   5

5. useTimeout.ts useTimeout.ts

   1

   import { useEffect, useRef } from 'react';

   2

   3

   export function useTimeout(callback: () => void, delay: number) {

   4

     const callbackRef = useRef(callback);  

   5

     // update current callback every render

6. generateClasses.ts generateClasses.ts

   1

   const generateClasses = (defaultClass: string) => 

   2

     (childClass = '', props: Record<string, boolean> = {}, additionalClassName = '') => {

   3

       const baseClass = childClass ? `${defaultClass}__${childClass}` : defaultClass;

   4

       const classes = [baseClass];

   5