How to force new state in React (Hooks) for textarea when clicking on another element?

Issue

• codesandbox.io sandbox
• github.com repository

I am creating this small Wiki project.

My main component is Editor(), which has handleClick() and handleModeChange() functions defined.

handleClick() fires when a page in the left sidebar is clicked/changed.

handleModeChange() switches between read and write mode (the two icon buttons in the left sidebar).

When in read mode, the clicking on different pages in the left sidebar works properly and changes the main content on the right side.

However, in write mode, when the content is echoed inside <TextareaAutosize>, the content is not changed when clicking in the left menu.

In Content.js, I have:

<TextareaAutosize
  name="textarea"
  value={textareaValue}
  minRows={3}
  onChange={handleMarkdownChange}
/>

textareaValue is defined in Content.js as:

const [textareaValue, setTextareaValue] = useState(props.currentMarkdown);

const handleMarkdownChange = e => {
  setTextareaValue(e.target.value);
  props.handleMarkdownChange(e.target.value);
};

I am unsure what is the correct way to handle this change inside textarea. Should I somehow force Editor's child, Content, to re-render with handleClick(), or am I doing something completely wrong and would this issue be resolved if I just changed the definition of some variable?

I have been at this for a while now...

Solution

You just need to update textareaValue whenever props.currentMarkdown changes. This can be done using useEffect.

useEffect(() => {
  setTextareaValue(props.currentMarkdown);
}, [props.currentMarkdown]);

---

Problem:

const [textareaValue, setTextareaValue] = useState(props.currentMarkdown);

useState will use props.currentMarkdown as the initial value but it doesn't update the current state when props.currentMarkdown changes.

---

Unrelated:

The debounce update of the parent state can be improved by using useRef

const timeout = useRef();

const handleMarkdownChange = (newValue) => {
    if (timeout.current) {
        clearTimeout(timeout.current);
    }
    timeout.current = setTimeout(function () {
        console.log("fire");
        const items = [];
        for (let value of currentData.items) {
            if (value["id"] === currentData.active) {
                value.markdown = newValue;
                value.unsaved = true;
            }
            items.push(value);
        }
        setCurrentData({ ...currentData, items: items });
    }, 200);
};

using var timeout is bad because it declares timeout on every render, whereas useRef gives us a mutable reference that is persisted across renders

Answered By - Ramesh Reddy