Update from obsidian - thinkpad

Affected files:
.obsidian/plugins/obsidian-omnivore/data.json
Read Later/Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir-.md
Read Later/How Game Reviews Actually Affect You.md
Read Later/Let's Get Webby! 🦀 🕸️.md
Read Later/Use cases for Rust.md
Read Later/What the Rust Book didn't tell you about testing....md
Read Later/Why Signals Are Better Than React Hooks.md
books/Book/Caballo de troya.md
books/Book/En el nombre de la rosa.md
notes/coping mechanisms/Good Enough.md
notes/utils/Crear una nueva funcionalidad.md
notes/utils/Git.md
notes/utils/React.md
projects/personal-page-notes/List of Games.md
projects/quests.md

notes/utils/React.md

@@ -1,3 +1,5 @@
+## Issues with useEffect dependency array
+
 React use [shallow comparision](https://learntechsystems.com/what-is-shallow-comparison-in-js/) (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
@@ -50,3 +52,33 @@ useEffect(() => {
 ```
 
 [source](https://blog.logrocket.com/solve-react-useeffect-hook-infinite-loop-patterns/)
+
+
+## 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:
+
+```jsx
+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>
+  )
+}
+```