fetch call firing onChange rather than onSubmit-CodePudding

I'm building a recipe search page with React. There are two components - Navbar and Home. The Navbar takes in the search query and the Home renders the data.

The API call works fine and the recipes render as needed. The issue I'm having is whenever the user types anything in the search bar, my fetch call fires - but I need the request to fire only when the submit button is pressed.

Here's the code: (I'm using App.js as the intermediary between the two components because they're siblings)

NAVBAR

function Navbar({ setInput, handleSubmit }) {

  return (
  // Step 1 - User inputs query
     <form onSubmit={handleSubmit}>
       <input onChange={(e) => setInput(e.target.value)} />
       <button type="submit">SUBMIT</button>
     </form>
  )
}

APP.JS

function App() {
  const [input, setInput] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    navigate('/home')
  };

  return (
  // Step 2 - App handles exchange
    <Navbar setInput={setInput} handleSubmit={handleSubmit} />
    <Home input={input} handleSubmit={handleSubmit} />
  )
}

HOME

function Home({ input, handleSubmit }) {

useEffect(() => {
        axios.get(`www.recipeAPI/${input}`)
        .then(res => //render recipes with res)
    }, [handleSubmit]);


  return (
    // Step 3 - fetch call data gets rendered
  )
}

I've tried all kinds of hooks and listeners but nothing seems to stop the API from calling everytime a user types.

I appreciate the help in advance :/

CodePudding user response：

Whenever App is re-rendered, stating input state for example, you re-create the handleSubmit function. Since the handleSubmit function is a dependency of the useEffect in home, it react to the change, and a call is issued.

To prevent that wrap handleSubmit with useCallback, which would memoize the function, and prevent generating a new function on each re-render.

function App() {
  const [input, setInput] = useState('')

  const handleSubmit = useCallback((e) => {
    e.preventDefault()
    navigate('/home')
  }, []);

  return (
  // Step 2 - App handles exchange
    <Navbar setInput={setInput} handleSubmit={handleSubmit} />
    <Home input={input} handleSubmit={handleSubmit} />
  )
}

CodePudding user response：

What I ended up doing was moving the entire fetch call to App.js and passing down the results to home. That solved the issue