From dc2c0402360eec93c332b2804eafc9d8694e90a9 Mon Sep 17 00:00:00 2001 From: Joshua Chudy Date: Wed, 1 Nov 2023 18:43:21 -0700 Subject: [PATCH] useState, useRef, useStateRef in dev guide --- docs/dev-docs/dev-guide.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/dev-docs/dev-guide.md b/docs/dev-docs/dev-guide.md index 98c41ccd0..0ccb18d6e 100644 --- a/docs/dev-docs/dev-guide.md +++ b/docs/dev-docs/dev-guide.md @@ -124,6 +124,23 @@ The rules that should be followed while writing code. setCounter(prevCounter => prevCounter + 1); }; ``` +- When to use different React hooks, `useState`, `useRef`, and `useStateRef` + - `useState`: + - common to both `useState` and `useRef`, remembers it's value after a rerender of the component + - used to bind component state with rendering the component + - state update is asynchronous, the new state value won't be updated until after rerender + - modifying the state will queue a rerender of the component which will have the new state value that was set before rerender + - `useRef`: + - common to both `useState` and `useRef`, remembers it's value after a rerender of the component + - does not trigger rerenders of the component or `useEffect` of component + - ref update is synchronous, meaning the new value is immediately available in other functions + - better for accessing mutable values that are independent of the React component state + - useful when mutating a value that is used in another function later in the stack before a rerender would occur + - for instance, in a function used as a callback for a promise + - `.current` is a mutable value + - `useStateRef`: + - when a value is needed in functions and is used for triggering component rerenders, use this custom hook + - intended to be synchronous - List items must have keys, which tell React list item identity - Should be unique per list - Ideally, use item IDs