javascript - Implementing Lodash's debounce in a ReactJS functional component - Stack Overflow

admin管理员组

文章数量:1356783

I'm trying to debounce text input field change with Lodash's debounce function.

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const onChange = debounce((e) => {
    const { value } = e.target;
    console.log('debounced value', value)
  }, 1000)

  return (

    <input type="text" onChange={ onChange } />

  )
};

The code above throws the following errors:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

Uncaught TypeError: Cannot read property 'value' of null

What is the correct implementation?

I'm trying to debounce text input field change with Lodash's debounce function.

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const onChange = debounce((e) => {
    const { value } = e.target;
    console.log('debounced value', value)
  }, 1000)

  return (

    <input type="text" onChange={ onChange } />

  )
};

The code above throws the following errors:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

Uncaught TypeError: Cannot read property 'value' of null

What is the correct implementation?

• javascript
• reactjs
• lodash
• debouncing

Share Improve this question Follow asked Aug 31, 2020 at 5:30 anonymanonym 4,8501313 gold badges5151 silver badges7676 bronze badges 1

• 1 You need to send value in input tag. Refer this post for example implementation: medium./@rajeshnaroth/… – Parikshith Kedilaya M Commented Aug 31, 2020 at 5:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

When to Use Refs There are a few good use cases for refs:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

Refs and the DOM

The way you defined Input, I am assuming it would be used in many places. So, I would do this:

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  // Debounced function
  // `printValue` only cares about last state of target.value
  const printValue = debounce(value => console.log(value), 1000);

  // Event listener called on every change
  const onChange = ({ target }) => printValue(target.value);

  return <input type="text" onChange={ onChange } />;    

};

If we don't need to rely on any internal ponent state/props in our onChange handler, we should be able to lift the debounced function call out of the ponent (to avoid it being recreated on each render), which means we don't need to use refs or useCallback:

import debounce from "lodash.debounce";

import Input from "./Input";

const handleChange = debounce(({ target }) => {
  console.log(target.value);
}, 500);

export default function App() {
  return (
    <div className="App">
      <label htmlFor="input-first-name">First name</label>
      <Input id="input-first-name" name="firstName" onChange={handleChange} />
    </div>
  );
}

CodeSandbox: https://codesandbox.io/s/react-input-debounce-feleu9?file=/src/App.js&expanddevtools=1

The fix was not to retrieve the value from the event but from the input directly with a ref.

import React, { useRef } from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const input = useRef( null )

  const onChange = debounce(() => {
    console.log('debounced value', input.current.value)
  }, 1000)

  return (

    <input ref={ input } type="text" onChange={ onChange } />

  )
};

本文标签： javascriptImplementing Lodash39s debounce in a ReactJS functional componentStack Overflow