diff --git a/snippets/usePersistedState.md b/snippets/usePersistedState.md index aeba7be52..1bef765fe 100644 --- a/snippets/usePersistedState.md +++ b/snippets/usePersistedState.md @@ -8,12 +8,12 @@ lastUpdated: 2021-10-13T19:29:39+02:00 Returns a stateful value, persisted in `localStorage`, and a function to update it. - Use the `useState()` hook to initialize the `value` to `defaultValue`. -- Use the `useRef()` hook to create a ref that will hold the `name` of the value in `localStorage`. +- Use the `useRef()` hook to create a ref that will hold the `name` of the value in `Window.localStorage`. - Use 3 instances of the `useEffect()` hook for initialization, `value` change and `name` change respectively. - When the component is first mounted, use `Storage.getItem()` to update `value` if there's a stored value or `Storage.setItem()` to persist the current value. - When `value` is updated, use `Storage.setItem()` to store the new value. -- When `name` is updated, use `Storage.setItem()` to create the new key, update the `nameRef` and use `Storage.removeItem()` to remove the previous key from `localStorage`. -- **Note:** The hook is meant for use with primitive values (i.e. not objects) and doesn't account for changes to `localStorage` due to other code. Both of these issues can be easily handled (e.g. JSON serialization and handling the `'storage'` event). +- When `name` is updated, use `Storage.setItem()` to create the new key, update the `nameRef` and use `Storage.removeItem()` to remove the previous key from `Window.localStorage`. +- **Note:** The hook is meant for use with primitive values (i.e. not objects) and doesn't account for changes to `Window.localStorage` due to other code. Both of these issues can be easily handled (e.g. JSON serialization and handling the `'storage'` event). ```jsx const usePersistedState = (name, defaultValue) => { diff --git a/snippets/useRequestAnimationFrame.md b/snippets/useRequestAnimationFrame.md index 40c3ef047..a45166baf 100644 --- a/snippets/useRequestAnimationFrame.md +++ b/snippets/useRequestAnimationFrame.md @@ -8,7 +8,7 @@ Runs an animating function, calling it before every repaint. - Use the `useRef()` hook to create two variables. `requestRef` will hold the last request id and `previousTimeRef` will hold the last timestamp. - Define a function, `animate`, which handles updating these variables, runs the `callback` and calls `Window.requestAnimationFrame()` perpetually. -- Use the `useEffect()` hook with an empty array to initialize the value of `requestRef` using `Window.requestAnimationFrame()`. Use the `return` value and `Window.cancelAnimationFrame()` to clean up when the component unmounts. +- Use the `useEffect()` hook with an empty array to initialize the value of `requestRef` using `Window.requestAnimationFrame()`. Use the returned value and `Window.cancelAnimationFrame()` to clean up when the component unmounts. ```jsx const useRequestAnimationFrame = callback => { diff --git a/snippets/useSSR.md b/snippets/useSSR.md index 299a9e213..51729468b 100644 --- a/snippets/useSSR.md +++ b/snippets/useSSR.md @@ -8,7 +8,7 @@ lastUpdated: 2021-03-10T06:38:42+02:00 Checks if the code is running on the browser or the server. - Create a custom hook that returns an appropriate object. -- Use `typeof window`, `window.document` and `Document.createElement()` to check if the code is running on the browser. +- Use `typeof`, `Window`, `Window.document` and `Document.createElement()` to check if the code is running on the browser. - Use the `useState()` hook to define the `inBrowser` state variable. - Use the `useEffect()` hook to update the `inBrowser` state variable and clean up at the end. - Use the `useMemo()` hook to memoize the return values of the custom hook. diff --git a/snippets/useSearchParam.md b/snippets/useSearchParam.md index da9a861af..95e9c0d68 100644 --- a/snippets/useSearchParam.md +++ b/snippets/useSearchParam.md @@ -6,7 +6,7 @@ firstSeen: 2021-10-13T05:00:00-04:00 Tracks the browser's location search param. -- Use the `useCallback()` hook to create a callback that uses `new URLSearchParams()` to get the current value of `param`. +- Use the `useCallback()` hook to create a callback that uses the `URLSearchParams` constructor to get the current value of `param`. - Use the `useState()` hook to create a state variable that holds the current value of the `param`. - Use the `useEffect()` hook to set appropriate event listeners to update the state variable when mounting and clean them up when unmounting. diff --git a/snippets/useSessionStorage.md b/snippets/useSessionStorage.md index e76937694..4c4fd95b5 100644 --- a/snippets/useSessionStorage.md +++ b/snippets/useSessionStorage.md @@ -7,7 +7,7 @@ firstSeen: 2021-09-15T05:00:00-04:00 Creates a stateful value that is persisted to `sessionStorage`, and a function to update it. - Use the `useState()` hook with a function to initialize its value lazily. -- Use a `try...catch` block and `Storage.getItem()` to try and get the value from `sessionStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state. +- Use a `try...catch` block and `Storage.getItem()` to try and get the value from `Window.sessionStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state. - Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it. ```jsx diff --git a/snippets/useTitle.md b/snippets/useTitle.md index 4d5cd32c5..c88e3dc29 100644 --- a/snippets/useTitle.md +++ b/snippets/useTitle.md @@ -6,8 +6,8 @@ firstSeen: 2021-09-27T05:00:00-04:00 Sets the title of the page -- Use `typeof` to determine if the `document` is defined or not. -- Use the `useRef()` hook to store the original title of the `document`, if defined. +- Use `typeof` to determine if the `Document` is defined or not. +- Use the `useRef()` hook to store the original title of the `Document`, if defined. - Use the `useEffect()` hook to set `Document.title` to the passed value when the component mounts and clean up when unmounting. ```jsx