From 8d2a0f129906d6b87c838b7a328b8d3a088e05b2 Mon Sep 17 00:00:00 2001
From: Luke Bailey <hello@lukebailey.io>
Date: Wed, 12 Jan 2022 21:25:46 +0000
Subject: [PATCH] fix: move check timeline play call to a useEffect hook

---
 src/components/Checkbox.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 197b18d..01e0bdc 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,6 +1,6 @@
 import type { CheckboxProps, ToggleProps } from '@react-types/checkbox';
 import { gsap } from 'gsap';
-import type { ChangeEvent, ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { useEffect, useRef } from 'react';
 import { useCheckbox } from 'react-aria';
 import { useToggleState } from 'react-stately';
@@ -107,15 +107,13 @@ export const Checkbox = ({
       });
   }, []);
 
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const checked = event.target.checked;
-    setSelected(checked);
+  useEffect(() => {
     checkedTl.current.play(0);
-  };
+  }, [isSelected]);
 
   return (
     <Label>
-      <Input {...inputProps} {...restProps} onChange={onChange} ref={ref} />
+      <Input {...inputProps} {...restProps} ref={ref} />
       <IconContainer>
         <CheckIcon strokeDashoffset={isSelected ? '' : '21'} />
       </IconContainer>