score:3

Accepted answer

you want to debounce. when you debounce a function it will only execute the function a certain amount of time after the last time it was called. if it gets called again then the timer resets before it executes. lodash has a debounce method. you want to debounce the save method by 5000ms and then call the function every time the user changes input, then if they stop typing for 5 seconds, the save will be called. here are the docs for lodash debounce https://lodash.com/docs/4.17.4#debounce

score:1

you can use lodash debounce() for this.

score:1

move your interval to componentdidmount and save this.state.inputvalue to the local storage. onchange just set the state value.

import react, { component } from 'react';
import throttle from 'lodash/throttle';

class something extends component {
  state = { inputvalue: "", changed: false };

  handlechange = (event) => {
    this.setstate({ inputvalue: event.target.value, changed: true });
  }

  componentdidmount() {
      this.interval = setinterval(()=> {
          if (this.state.changed === true) {
              // here save to the localstorage this.state.inputvalue
              this.setstate({ changed: false });
          }
      }, 5000);
  }

  componentwillunmount() {
      clearinterval(this.interval);
  }

  render() {
    return (
      <div>
        <input type="text" 
          value={this.state.inputvalue} 
          placeholder="type something here" 
          onchange={this.handlechange} 
        />
      </div>
    );
  }
};

Related Query

More Query from same tag