🏷️ [react-hooks] Introduce initializer function to useToggle (#2734)

* [react-hooks] Introduce initializer function to useToggle

* Updates react-hooks' useToggle documentation

* Add changeset to react-hooks

.changeset/kind-hornets-report.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-hooks': minor
+---
+
+Introduce initializer function to useToggle

packages/react-hooks/README.md

@@ -242,7 +242,7 @@ function Score({value}) {
 
 ### `useToggle()`
 
-This hook provides an object that contains a boolean state value and a set of memoised callbacks to toggle it, force it to true, and force it to false. It accepts one argument that is the initial value of the state. This is useful for toggling the active state of modals and popovers.
+This hook provides an object that contains a boolean state value and a set of memoised callbacks to toggle it, force it to true, and force it to false. It accepts one argument that is the initial value of the state or an initializer function returning the initial value. This is useful for toggling the active state of modals and popovers.
 
 ```tsx
 function MyComponent() {

packages/react-hooks/src/hooks/tests/toggle.test.tsx

@@ -4,7 +4,11 @@ import {mount} from '@shopify/react-testing';
 import {useToggle} from '../toggle';
 
 describe('useToggle', () => {
-  function MockComponent({initialValueIsTrue = false}) {
+  function MockComponent({
+    initialValueIsTrue = false,
+  }: {
+    initialValueIsTrue?: boolean | (() => boolean);
+  }) {
     const {value, toggle, setTrue, setFalse} = useToggle(initialValueIsTrue);
 
     const activeText = value ? 'true' : 'false';
@@ -25,6 +29,16 @@ describe('useToggle', () => {
 
     const wrapperInitallyTrue = mount(<MockComponent initialValueIsTrue />);
     expect(wrapperInitallyTrue).toContainReactText('Value: true');
+
+    const wrapperInitallyFunctionFalse = mount(
+      <MockComponent initialValueIsTrue={() => false} />,
+    );
+    expect(wrapperInitallyFunctionFalse).toContainReactText('Value: false');
+
+    const wrapperInitallyFunctionTrue = mount(
+      <MockComponent initialValueIsTrue={() => true} />,
+    );
+    expect(wrapperInitallyFunctionTrue).toContainReactText('Value: true');
   });
 
   it('toggles the value when the toggle callback is triggered', () => {

packages/react-hooks/src/hooks/toggle.ts

@@ -4,7 +4,7 @@ import {useState, useCallback} from 'react';
  * Returns a stateful value, and a set of memoized functions to toggle it,
  * set it to true and set it to false
  */
-export function useToggle(initialState: boolean) {
+export function useToggle(initialState: boolean | (() => boolean)) {
   const [value, setState] = useState(initialState);
 
   return {