https://chatgpt.com/share/690e46cc-2654-8007-8f8b-e1f833521253

Note: As a rule of thumb, in React, if the value of a state is dependent on another state, then the dependent state should not be declared as a state at all. Because it is more error prone because of out of sync state updation. In such cases, just compute the dependent state in a variable or on the go from the independent state.

• Why React does not allow writing async function as first argument of useEffect() ?

  • Because async functions always return a promise. useEffect expects a function to either return nothing, or return a cleanup logic. A promise is not a valid return type of useEffect because it is not relevant. So it rejects the async function.

    To do an async task inside useEffect, which we certainly need to do, as API calls are also considered as side effects, do the following:

useEffect(() => {
	async function foo () {
		// do async task
	}
	foo()
	return () => { // cleanup logic }
}, [dep])

• Lifecycle of useEffect
  • useEffect is a hook which is used to perform side effects, or tasks that does not involve in component rendering, such as background api requests, reference updates, timer functions etc
  • useEffect is triggered in three possible ways:
    • when the component or hook that contains useEffect mounts
    • when the component re-renders (optional)
    • when a state mentioned as a dependency gets changed, causing re-render
  • useEffect is only executed after the component has successfully drawn on the DOM tree, not before that
• useDebounce hook

  • Debounce is a concept of delaying a task, which maybe executing a function or updating a state, given a specific delay.

  • For example, in a search component, to perform auto-complete the component has to perform some backend request. Now, if the component executes the backend request every time the search input changes, there will be a swarm of backend requests which will be too expensive for a network.

    Therefore, the backend request is sent after the user has stopped typing for a while, denoted by the delay after the search input changes

  • we can implement such process by using a custom hook, where an useEffect will be used which will run a setTimeout for a specific delay. But, if the user continues typing before that delay ends, the timeout must be cleared

    //  useDebounce implementation
    const useDebounce = (value, delay) => {
    	const [debouncedValue, setDebouncedValue] = useState(value);
    	useEffect(() => {
    		const handler = setTimeout(() => {
    			setDebouncedValue(value);
    		}, delay);
    		
    		return () => { clearTimeout(handler); }
    	}, [value, delay]);
    	return debouncedValue;
    }
    
    // the rendering flow of useDebounce is discussed in detail in the ChatGPT
    // chat link given at the top
    

    // consumption of useDebounce
    
    const SearchBox = () => {
    	const [input, setInput] = useState("");
    	const debouncedValue = useDebounce(value, 500); // 500ms delay
    	
    	useEffect(() => {
    		if(debouncedValue == "") return;
    		fetch("<https://api.example.com/search?q={debouncedValue}>");
    	}, [debouncedValue]);
    	
    	return <>
    		<span>{debouncedValue}</span>
    		<input
    		type="text"
    		placeholder="search"
    		onChange={(e) => setInput(e.target.value); }
    		/>
    	</>
    }