How to use useEffect inside a handler or vice versa?

Question

I have a function which is handler of onChange and get value of input
and also I have a function for search in an array using searched value coming from that input
and render a component that contains searched array as props.
But I have a problem when I search it works but after second letter and when the input is empty it shows the last search.
I think it should be handled with useEffect but I dont how to solve or may be I am wrong I need help to correct that
thanks for your help.

these are my code :

getting search value part and sending as argument :

function BasePage({handleClick, handleSearch }) {
    
    const [searchValue, setSearchValue] = useState('');
    
    useEffect(() => {
        function handleChangeSearchInput(e) {
        const newSearchValue = e.target.value;
        setSearchValue(newSearchValue);
        handleSearch(searchValue);
    }
    })
    
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input 
            value = {searchValue} 
            onChange = {handleChangeSearchInput}
            placeholder = "Enter name to search" 
            type = "text"
            />
                <button onClick={() => handleClick('add-record-form')}>Add</button>
    </fieldset>
            <br />
            {searchValue.length > 0 && <SearchRecord record = {searchValue} />}
        </div>
    );
}

and this filters in parent component :

function handleSearch(searchValue) {
       const searchedTerm = contacts.filter(contact => (contact.name.toLowerCase().includes(searchValue.toLowerCase())));
        setSearchTerms(searchedTerm);
    }

and I use map to show them .

Answer 1

You shouldn't need useEffect for this. Just have the handler deal with both the setting of state, and the updating.

function handleChangeSearchInput(e) {
  const newSearchValue = e.target.value;
  setSearchValue(newSearchValue);
  handleSearch(newSearchValue);
}