<br/>

Create React App no longer support global installation This is how to fix the issue

```js import { useState } from 'react';

/* * @return {Function} getterSetter / export function useStateFunction(initialValue) { const [state, setState] = useState(initialValue);

return function(...args) {
    if (args.length === 0) {
        return state;
    }
    return setState(...args);
};

} ```

```js function App() { const buttonRef = useRef(null); const hookValue = useMyHook(buttonRef.current); const [forceUpdate, setForceUpdate] = useState(false);

return ( <div> <button onClick={() => setForceUpdate(prevState => !prevState)}> Update Component </button> <button ref={buttonRef}>Update Hook</button> {"This is hook returned value: " + hookValue} </div> ); } ```

```js import { useEffect, useState } from "react";

function useMyHook(element) { const [myHookState, setMyHookState] = useState(0);

console.log("Inside useMyhook..."); console.log("This is the element received: " + element);

useEffect(() => { console.log("Inside useMyhook useEffect...");

function onClick() {
  setMyHookState(prevState => prevState + 1);
}

if (element !== null) {
  element.addEventListener("click", onClick);
}
return () => {
  console.log("Inside useMyhook useEffect return...");
  if (element !== null) {
    element.removeEventListener("click", onClick);
  }
};

});

return myHookState; }

export default useMyHook; ```

js useEffect(() => { console.log(outcomes) }, [JSON.stringify(outcomes)]) // 🧐🤯

```js import { useMutation, useQuery, useQueryClient } from 'react-query';

export default function usePersistentContext(key) { const queryClient = useQueryClient();

const { data } = useQuery(key, () => localStorage.getItem(key));

const { mutateAsync: setValue } = useMutation( (value) => localStorage.setItem(key, value), { onMutate: (mutatedData) => { const current = data; queryClient.setQueryData(key, mutatedData); return current; }, onError: (_, __, rollback) => { queryClient.setQueryData(key, rollback); }, } );

return [data, setValue]; } ```

js function SetContext() { const [value, setValue] = usePersistentContext('item_context'); return ( <button onClick={() => setValue(value === 'on' ? 'off' : 'on')}> Click me {value} </button> ); }

```js useEffect(() => { setDivHeight(ref.current.offsetHeight); console.log('height: ', ref.current.offsetHeight);

console.log('width: ', ref.current.offsetWidth); }, []); ```

```js export function Tweet({ tweetID, }) { const tweetRef = useRef(null); const [isLoading, setIsLoading] = useState(true);

useEffect(() => { const tweetEl = tweetRef?.current if (window.twttr && tweetEl) (async() => { await window.twttr.ready(); await window.twttr.widgets.createTweet( tweetID, tweetEl, { align: 'center', conversation: 'none', dnt: true, } ); setIsLoading(false); console.log('Tweet loaded') })(); return () => { tweetEl?.remove(); } }, [tweetID, tweetRef]);

return ( <div ref={tweetRef} className="w-full bg-gray-100 h-fit animate-fadeIn" id={tweetID}> {isLoading &&

🐦