master-wiki/notes/utils/React.md at 7ae456f72fe9c52bf0ab5f557b2b576e864e138d

aleidk 3a87d09933 Update from obsidian - thinkpad

Affected files:
.obsidian/workspace.json
games/castlevania-symphony-of-the-night.md
notes/utils/React.md
projects/games.md

2023-09-04 23:17:19 -03:00

1.5 KiB

Raw Blame History

Typescript

Cheatsheet

Prevent UseEffect Infinite Loops

React use shallow comparision (values are equals in case of primitive types. In case of object it just check the reference) to check if the dependency changes between renders, this can conduce to bugs in the following situa

Always use a depency array

useEffect(() => {
  setCount((count) => count + 1);
}, []);

Function as dependency

React re defines functions on every render, so the dependency always changes, use useCallback to memoize the function so it doesn't change

const logResult = useCallback(() => {
  return 2 + 2;
}, []);

useEffect(()=> {
  setCount((count) => count + 1);
}, [logResult]);

Array as dependency

The reference to an array changes in every render, use useRef so it doesn't change

const [count, setCount] = useState(0);
//extract the 'current' property and assign it a value
const { current: myArray } = useRef(["one", "two", "three"]);

useEffect(() => {
  setCount((count) => count + 1);
}, [myArray]);

Object as dependency

The reference to an object changes in every render, use useMemo so it doesn't change

const person = useMemo(
  () => ({ name: "Rue", age: 17 }),
  [] //no dependencies so the value doesn't change
);
useEffect(() => {
  setCount((count) => count + 1);
}, [person]);

source

1.5 KiB Raw Blame History