Remove useLayoutEffect

Author: onesine

src/components/Datepicker.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
+import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import dayjs from "dayjs";
 import {formatDate, nextMonth, previousMonth} from "../helpers";
 import Input from "../components/Input";
@@ -131,7 +131,7 @@ const Datepicker: React.FC<Props> = ({primaryColor = "blue", value = null, onCha
     }, [secondDate, secondGotoDate]);
 
     // UseEffects & UseLayoutEffect
-    useLayoutEffect(() => {
+    useEffect(() => {
         const container = containerRef.current;
         const calendarContainer = calendarContainerRef.current;
         const arrow = arrowRef.current;

src/components/Input.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import {CloseIcon, DateIcon} from "./utils";
-import React, {useCallback, useContext, useLayoutEffect, useRef} from "react";
+import React, {useCallback, useContext, useEffect, useRef} from "react";
 import {BORDER_COLOR, RING_COLOR} from "../constants";
 import {dateIsValid} from "../helpers";
 import DatepickerContext from "../contexts/DatepickerContext";
@@ -41,7 +41,7 @@ const Input: React.FC = () => {
     }, [changeDatepickerValue, changeDayHover, changeInputText, hideDatepicker]);
 
     // UseEffects && UseLayoutEffect
-    useLayoutEffect(() => {
+    useEffect(() => {
         const button = buttonRef?.current;
 
         function focusInput (e: Event) {
@@ -76,7 +76,7 @@ const Input: React.FC = () => {
         };
     }, [changeDatepickerValue, changeDayHover, changeInputText, dayHover, inputText, period.end, period.start]);
 
-    useLayoutEffect(() => {
+    useEffect(() => {
         const div = calendarContainer?.current;
         const input = inputRef.current;