Stale data after using useState hook

Question

I am trying to use react-mentions library which has a onAdd function as a prop which is fired once user selects a value from the suggestions that are rendered. I've leveraged hooks for the same but when I set the value of comment the data is stale inside the onAdd function even if it is invoked after the onChange event is triggered. Here is the code snippet for the same

import React, { useState, useEffect } from "react";
import { MentionsInput, Mention } from "react-mentions";

const MyComponent = props => {
  let [comment, setComment] = useState("");

  function onAdd(id, display) {
    // Do something here
    console.log("Comment inside onAdd: ", comment);
  }

  function handleCommentChange(e) {
    // Handle the changes in the textArea
    console.log("from handleCommentChange: ", e.target.value);
    setComment(e.target.value);
  }

  function renderSuggestion(entry, search, highlightedDisplay, index, focused) {
    // Modify the suggestion dropdown by returning valid JSX
    return (
      <>
        <span>{entry.display}</span>
      </>
    );
  }

  function handleSubmitComment(e) {
    e.preventDefault();
    // Do something to submit comment
  }

  return (
    <>
      <MentionsInput
        markup="@[__display__](__id__)"
        value={comment}
        onChange={handleCommentChange}
        placeholder={"Mention people using '@'"}
      >
        <Mention
          trigger="@"
          data={[{
  id: "1",
  display: "Jimmy"
},
{
  id: "2",
  display: "Ketut"
},
{
  id: "3",
  display: "Gede"
}]}
          renderSuggestion={renderSuggestion}
          onAdd={onAdd}
          appendSpaceOnAdd={true}
        />
      </MentionsInput>

      <button onClick={handleSubmitComment}>Comment</button>
    </>
  );
};

export default MyComponent;

Now when I check the from handleCommentChange console.log it has value @Jimmy if i select Jimmy but inside onAdd function it is still @

Which was previous value of the comment and not the current value. I am new to react hooks and would like to know what am i missing here?

yes atleast logs seem to be in that sequence so I get `from handleCommentChange:` first and then I get `Comment inside onAdd:` — Stacker, Feb 08 '20 at 20:10
Hmm, that's because changing the state is asynchronous, you can add some conditions(inside onAdd) that check if the state is empty or not and then do what you want. — Ramesh Reddy, Feb 08 '20 at 20:15
but whenever I receive data inside onAdd it will never be empty I'll have to write some logic to check if the current state and prev state are same or different is it possible? — Stacker, Feb 08 '20 at 20:17
check [this](https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect) — Ramesh Reddy, Feb 08 '20 at 20:21
I just realized that this won't help because if user clicks on comment without changing tagging next user onAdd will never be called and hence no action would be performed inside onAdd for the latest data. Because onAdd is only called when an item is selected from the suggestions. — Stacker, Feb 08 '20 at 20:31
Also I believe there is no closure here and hence if the component is re-rendered after the change in state then the onAdd function should actually receive a new value — Stacker, Feb 08 '20 at 20:35
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Drew Reese, Feb 08 '20 at 23:52

Stale data after using useState hook

0 Answers0