score:3
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>
);
}
};
Source: stackoverflow.com
Related Query
- Executing a click only a certain amount of time without accumulating events
- State change after a certain amount of time with React.js
- Adding class to React Component after a certain amount of time
- Select only a card at a time on click in reactjs
- How can I run an assertion test after a certain amount of simulated time using jest?
- How do you constantly refresh a react component every certain amount of time
- React Scroll like page turn or scroll certain amount once time
- Redux component, can I write click events without using class
- React Big Calendar shows only certain range of time
- React Js, My componet is only updating the first time I click row in my list
- Reactjs - Isotope - expand and collapse on click - but have ONLY one item at a time
- Login issue, I need to double click to in order to login, how can i fix that to only click one time
- How to listen for click events that are outside of a component
- React Synthetic Event distinguish Left and Right click events
- React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
- Calling setState in a loop only updates state 1 time
- Removing element from DOM after set amount of time
- React Click events not firing on mobile
- React - Get text of div on click without refs
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- Accessibility - React Ensure click events have key events
- How to handle click events on child components in React.js, is there a React "way"?
- Bootstrap dropdowns in ReactJS, only one open at a time
- What is the syntax for click events in React Hooks for passing arguments
- React: add body class only to certain components in useEffect hook?
- Focus next input once reaching maxlength value in react without jQuery and accept only numeric values
- useState hook can only set one object at the time and return the other object of the same array to initial state
- React antd expandedRowRender - Only open one row at a time
- How to select text to copy without triggering click event in reactjs
- React: Stop click event propagation when using mixed React and DOM events
More Query from same tag
- React-DnD - Dragging an element to the top of the screen when there's a fixed element on top doesn't scroll the page up
- Getting Property map doest not exist on Array
- React hooks async useEffect to load database data
- Scroll into a certain div that is hidden in the beggining
- Retrieving the type of JSX children
- Create React App - Can't run npm run test
- How to make a request to an API route from `getStaticProps`
- React throws CORs errors when moving recaptch ready callback
- Babel 5 plugin is being run with an unsupported Babel version
- Render a different image each time the user selects an option in React.js
- What do curly braces around a variable in a function parameter mean
- ReactJS & Django axios.post (403 error code)
- Passing Data to Component in React (props)
- Upload image to imgur api keeps responding error":"Authentication required
- Material UI: Display the dialog at the bottom left of the page
- How to provide hyperlinking for text selection in React
- How to render "N items selected" rather than the list of N selected items with react-select
- Why is yarn create react-app command not working
- React Deployment on IIS server
- React if statement in map inside JSX tag
- React/Preact .map an icon that when clicked runs a function
- ReactJS hide first child of map function
- update list array from child component
- How to manipulate object property on a reusable component in React
- How to use subscribe for multiple reducers in redux (RFC)?
- express is not fetching react build folder
- Style sheet to be imported based on the current active component in a multi-page React app with React-Router
- Change inline color on mouseover (React)
- onClick called repeatedly (not supposed to) when component re-renders
- Real-Time use case of this.props.children