Menu
I'm trying out ReactJS, but am running into difficulty incorporating it into my form. I'm building out an auto-suggest form in ReactJS. In my onChangeQuery, I'm setting the state and then calling out to an AJAX function to grab suggestions from my server-side code; however, I've noticed that the loadGroupsFromServer function isn't getting the latest state... It's one key stroke too slow. I know setState isn't instantaneous, but then why would I ever use setState for my forms? Is it better to use refs? Better to just get the value from e.target.value?
Help!
var GroupForm = React.createClass({ getInitialState: function() { return {query: "", groups: []} }, componentDidMount: function () { this.loadGroupsFromServer(); }, loadGroupsFromServer: function () { $.ajax({ type: "GET", url: this.props.url, data: {q: this.state.query}, dataType: 'json', success: function (groups) { this.setState({groups: groups}); }.bind(this), error: function (xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, onChangeQuery: function(e) { this.setState({query: e.target.value}) this.loadGroupsFromServer(); }, render: function() { return ( <div> <form class="form form-horizontal"> <div class="col-lg-12"> <input type="text" className="form-control" value={this.state.query} placeholder="Search for groups" onChange={this.onChangeQuery} /> </div> </form> <GroupList groups={this.state.groups} /> </div> ) } }) 
435
State updates in React are asynchronous; when an update is requested, there is no guarantee that the updates will be made immediately. The updater functions enqueue changes to the component state, but React may delay the changes, updating several components in a single pass.
Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.
setState , and React. useState create queues for React core to update the state object of a React component. So the process to update React state is asynchronous for performance reasons. That's why changes don't feel immediate.
Use the useEffect hook to wait for state to update in React. You can add the state variables you want to track to the hook's dependencies array and the function you pass to useEffect will run every time the state variables change.
setState takes a callback which allows you to ensure this.loadGroupsFromQuery() is called only after this.state is updated.
this.setState({...}, function() { this.loadGroupsFromQuery(); }); setState Best Practice
ES5
this.setState(function(state, props){ return { query: e.target.value } }, function()=>{ //after callback }); ES6
this.setState((state, props) => ({ query: e.target.value }), ()=>{ //after callback }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
