master-wiki/notes/React.md at d7bb3dad09ec3310548042fd999d3343018be9db

aleidk 3b9bdd9d44 re-structure notes

Affected files:
README.md
config.ts
notes/Crear una nueva funcionalidad.md
notes/Cypress.md
notes/Depression.md
notes/Design.md
notes/Dev Tools.md
notes/Email.md
notes/Git.md
notes/Good Enough.md
notes/How to build systems.md
notes/Meditation.md
notes/Misc.md
notes/Neovim.md
notes/React.md
notes/Self Steam.md
notes/The cult of done.md
notes/Tiding up the todos list.md
notes/Work.md
notes/conventional_commits.md
notes/daily/2023-08-11.md
notes/daily/2023-10-26.md
notes/daily/2023-10-27.md
notes/free time.md
notes/fuuka-juno.md
notes/index.md
notes/ulysses pact.md

2024-01-31 20:14:26 -03:00

2.3 KiB

Raw Blame History

Issues with useEffect dependency array

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

Reset a component state

React utiliza la propiedad key para poder identificar un componente, esta propiedad puede ser omitida y react le asignará una en base a su posición en el Virtual DOM Tree.

Cuando la propiedad cambia, React entiende que el componente no es el mismo, por lo que destruye el componente actual y crea uno nuevo, lo que por ende, tiene el estado inicial.

Para esto tenemos dos opciones:

Pasar alguna propiedad de los datos como key.
Generar un valor único localmente.

Lo primero es como pasar el ID de un usuario. para lo segundo podemos usar lo siguiente:

import { useRef } from 'react';

export default function Parent() {
  const key = useRef(crypto.randomUUID());

	const resetComponent = () => key.current = crypto.randomUUID();

  return (
		<div>
			<Component key={key.current} />
			<button onClick={() => resetComponent()}></button>
		</div>
  )
}

2.3 KiB Raw Blame History