Breaking News: Grepper is joining You.com. Read the official announcement!

useEffect to save a text input only after typing has been stopped in react

Yucky Yak answered on November 2, 2022 Popularity 1/10 Helpfulness 1/10

answer useEffect to save a text input only after typing has been stopped in react

related save a text input only after typing has been stopped in react

useEffect to save a text input only after typing has been stopped in react

Comment

import React, { useState, useEffect } from 'react'

const fakeApi = () => console.log('Api is called')

export default function App() {
  const [inputValue, setInputValue] = useState('')

  useEffect(() => {
    const timer = setTimeout(() => {
      fakeApi()
    }, 500)

    return () => clearTimeout(timer)
  }, [inputValue])

  return (
    <div>
      <label>Input: </label>
      <input
        value={inputValue}
        type="text"
        onChange={e => setInputValue(e.target.value)}
      />
    </div>
  )
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: eight-bites.blog

Tags: input javascript save text typing use-effect

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Yucky Yak

0 Answers Avg Quality 2/10

Closely Related Answers

save a text input only after typing has been stopped in react

Comment

import React, { useState, useEffect } from 'react'

const fakeApi = () => console.log('Api is called')

export default function App() {
  const [inputValue, setInputValue] = useState('')
  const [timer, setTimer] = useState(null)

  const inputChanged = e => {
    setInputValue(e.target.value)

    clearTimeout(timer)

    const newTimer = setTimeout(() => {
      fakeApi()
    }, 500)

    setTimer(newTimer)
  }
  
  return (
    <div>
      <label>Input: </label>
      <input value={inputValue} type="text" onChange={inputChanged} />
    </div>
  )
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: eight-bites.blog

Tags: input javascript save text typing

Link to this answer
Share Copy Link

Contributed on Nov 02 2022

Yucky Yak

0 Answers Avg Quality 2/10

useEffect to save a text input only after typing has been stopped in react

Contents

More Related Answers

useEffect to save a text input only after typing has been stopped in react

Closely Related Answers

save a text input only after typing has been stopped in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.