Update documentation after #15 and #14

Author: pirelenito

react-facet/docs/api/equality-checks.md

@@ -27,10 +27,13 @@ console.log(equalityCheck(1)) // false
 console.log(equalityCheck(1)) // true
 ```
 
-## `shallowObjectEqualityCheck`
+## `shallowObjectEqualityCheck` and `nullableShallowObjectEqualityCheck`
 
 Equality check that verifies the values of each key of an object.
-Each value must be a primitive (boolean, number or string)
+
+Each value must be a primitive (boolean, number or string).
+
+There is also a variant that supports "nullable values" (`undefined` and `null`).
 
 ```tsx
 import { shallowObjectEqualityCheck } from '@react-facet/equality-checks'
@@ -44,9 +47,11 @@ console.log(equalityCheck({ name: 'Steve', height: 2 })) // false
 console.log(equalityCheck({ name: 'Steve', height: 2 })) // true
 ```
 
-## `shallowObjectArrayEqualityCheck`
+## `shallowObjectArrayEqualityCheck` and `nullableShallowObjectArrayEqualityCheck`
 
-Does a shallow object equality check for each element in an array
+Does a shallow object equality check for each element in an array.
+
+There is also a variant that supports "nullable values" (`undefined` and `null`).
 
 ```tsx
 import { shallowObjectArrayEqualityCheck } from '@react-facet/equality-checks'
@@ -61,9 +66,11 @@ console.log(equalityCheck([{ name: 'Alex' }])) // true
 console.log(equalityCheck([{ name: 'Steve' }])) // false
 ```
 
-## `shallowArrayEqualityCheck`
+## `shallowArrayEqualityCheck` and `nullableShallowArrayEqualityCheck`
+
+Shallow equality check of primitives in an array.
 
-Shallow equality check of primitives in an array
+There is also a variant that supports "nullable values" (`undefined` and `null`).
 
 ```tsx
 import { shallowArrayEqualityCheck } from '@react-facet/equality-checks'

react-facet/docs/api/hooks.md

@@ -38,7 +38,7 @@ const Form = ({ onSubmit, initialValue }) => {
       onSubmit(currentValue)
     },
     [onSubmit],
-    value,
+    [value],
   )
 
   return (
@@ -53,7 +53,7 @@ const Form = ({ onSubmit, initialValue }) => {
 
 ## `useFacetCallback`
 
-The `useFacetCallback` hook is similar to React’s `useCallback` in that it allows you to create a memoized callback that will only be updated if some of the explicit dependencies change. On top of that, `useFacetCallback` allows you to pass in a Facet and get the current value of that facet in the callback body.
+The `useFacetCallback` hook is similar to React’s `useCallback` in that it allows you to create a memoized callback that will only be updated if some of the explicit dependencies change. On top of that, `useFacetCallback` allows you to pass one or more Facets and get the current values of those facets in the callback body.
 
 Say for example that you have a small form, and want to create a handler for the Submit action. You need to have access to the current value of a facet that stores the `value` of an input field in order to send that value back to the parent component when the `Submit` button of the form. `useFacetCallback` allows you to create such handler, which will always have access to the current value of the facet.
 
@@ -73,7 +73,7 @@ const Form = ({ onSubmit, initialValue }) => {
       onSubmit(currentValue)
     },
     [onSubmit],
-    value,
+    [value],
   )
 
   return (
@@ -88,9 +88,9 @@ const Form = ({ onSubmit, initialValue }) => {
 
 ## `useFacetEffect`
 
-The `useFacetEffect` hook gives you a way of performing some imperative action (effect) whenever the underlying facet is updated. It is very similar in structure and goal to React’s own `useEffect`.
+The `useFacetEffect` hook gives you a way of performing some imperative action (effect) whenever the underlying facets are updated. It is very similar in structure and goal to React’s own `useEffect`.
 
-Like `useEffect`, `useFacetEffect` takes an effect function to be called when the updates happen, a dependency list, and finally a facet.
+Like `useEffect`, `useFacetEffect` takes an effect function to be called when the updates happen, a dependency list, and finally one or more facets.
 
 ```tsx
 const Logger = ({ shouldLog }) => {
@@ -103,14 +103,14 @@ const Logger = ({ shouldLog }) => {
       }
     },
     [shouldLog],
-    statusFacet,
+    [statusFacet],
   )
 
   return <span>{shouldLog ? 'Logger is active' : 'Logger is disabled'}</span>
 }
 ```
 
-It also supports a cleanup function that can be returned by the effect function. This cleanup is called whenever any of the dependencies or the facet has changed or when the component is unmounted. In short, it behaves exactly like React’s `useEffect`.
+It also supports a cleanup function that can be returned by the effect function. This cleanup is called whenever any of the dependencies or the facets have changed or when the component is unmounted. In short, it behaves exactly like React’s `useEffect`.
 
 ```tsx
 const Logger = ({ shouldLog }) => {
@@ -128,7 +128,7 @@ const Logger = ({ shouldLog }) => {
       return () => clearTimeout(timerId)
     },
     [shouldLog],
-    statusFacet,
+    [statusFacet],
   )
 
   return <span>{shouldLog ? 'Logger is active' : 'Logger is disabled'}</span>

react-facet/docs/getting-started.md

@@ -117,7 +117,7 @@ const UpdateLogin = ({ onSubmit }) => {
       onSubmit(values)
     },
     [onSubmit],
-    temporaryValues,
+    [temporaryValues],
   )
 
   return (

react-facet/docs/rendering/using-facets-manually.md

@@ -23,7 +23,7 @@ const Counter = () => {
       ref.current.textContent = `${counterValue}`
     },
     [],
-    counter,
+    [counter],
   )
 
   const handleClick = useCallback(() => {