use refs

libs/remix-ui/search/src/lib/components/Exclude.tsx

@@ -1,14 +1,14 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Exclude = props => {
   const { setExclude, state } = useContext(SearchContext)
   const [str, setStr] = useState<string>('.git/**/*,.deps/**/*')
-  let timeOutId: any = null
+  const timeOutId = useRef(null)
   const change = e => {
     setStr(e.target.value)
-    clearTimeout(timeOutId)
-    timeOutId = setTimeout(() => setExclude(e.target.value), 500)
+    clearTimeout(timeOutId.current)
+    timeOutId.current = setTimeout(() => setExclude(e.target.value), 500)
   }
 
   useEffect(() => {

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useRef } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Find = props => {
@@ -9,10 +9,10 @@ export const Find = props => {
     toggleMatchWholeWord,
     toggleUseRegex
   } = useContext(SearchContext)
-  let timeOutId: any = null
+  const timeOutId = useRef(null)
   const change = e => {
-    clearTimeout(timeOutId)
-    timeOutId = setTimeout(() => setFind(e.target.value), 500)
+    clearTimeout(timeOutId.current)
+    timeOutId.current = setTimeout(() => setFind(e.target.value), 500)
   }
 
   return (

libs/remix-ui/search/src/lib/components/Include.tsx

@@ -1,14 +1,14 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Include = props => {
   const { setInclude } = useContext(SearchContext)
   const [str, setStr] = useState<string>('')
-  let timeOutId: any = null
+  const timeOutId = useRef(null)
   const change = e => {
     setStr(e.target.value)
-    clearTimeout(timeOutId)
-    timeOutId = setTimeout(() => setInclude(e.target.value), 500)
+    clearTimeout(timeOutId.current)
+    timeOutId.current = setTimeout(() => setInclude(e.target.value), 500)
   }
 
   return (

libs/remix-ui/search/src/lib/components/Replace.tsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react'
+import React, { useContext, useRef } from 'react'
 import { SearchContext } from '../context/context'
 
 export const Replace = props => {
   const { setReplace } = useContext(SearchContext)
-  let timeOutId: any = null
+  const timeOutId = useRef(null)
   const change = e => {
-    clearTimeout(timeOutId)
-    timeOutId = setTimeout(() => setReplace(e.target.value), 500)
+    clearTimeout(timeOutId.current)
+    timeOutId.current = setTimeout(() => setReplace(e.target.value), 500)
   }
 
   return (

libs/remix-ui/search/src/lib/context/context.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { createContext, useReducer } from 'react'
 import {
   findLinesInStringWithMatch,
@@ -44,8 +44,8 @@ export const SearchProvider = ({
   plugin = undefined
 } = {}) => {
   const [state, dispatch] = useReducer(reducer, initialState)
-  let reloadTimeOut: any = null
 
+  const reloadTimeOut = useRef(null)
   const value = {
     state,
     setFind: (value: string) => {
@@ -165,8 +165,8 @@ export const SearchProvider = ({
   }
 
   const reloadStateForFile = async (file: string) => {
-    clearTimeout(reloadTimeOut)
-    reloadTimeOut = setTimeout(async () => {
+    clearTimeout(reloadTimeOut.current)
+    reloadTimeOut.current = setTimeout(async () => {
       await value.reloadFile(file)
     }, 1000)
   }