React: how to use useEffect compared to componentDidUpdate?

Question

I am pretty much completely new to React. I've read the documentation and watched some YT video's. Now I am trying 'convert' some of this React class component that I found online to a functional component. This is how far I've come: My functional component(codesandbox).

It is a component to automatically wrap SVG text using tspan elements based on a user input field.

I am specifically having a hard time with the useEffect hook. As I understand it, it should function as the equivelant of componentWillMount and componentDidUpdate. Now I've got everything pretty much setup, but it does not yet update the Text component whenever new text is added in the textarea. I believe this is because I have to do something in the useEffect hook in the Text component:

  useEffect(() => {
    //something so that lines get updated if the user input changes?
  }, [lines]);

The things I've tried resulted in an infinite loop. See: Can I use set state inside a useEffect hook.

Could someone point me in the right direction? Feel free to fork the codesandbox :)

Could you attach a link to your code one more time? There are dummy data now — Pasha, Sep 11 '21 at 10:48
@Pasha Here you go: https://codesandbox.io/s/youthful-flower-dy2u1?file=/src/App.js — Reinier68, Sep 11 '21 at 11:54

score 0 · Answer 1 · answered Sep 11 '21 at 11:25

Firstly, useEffect is not like componentWillMount, it's componentDidMount - effects fire after a render.

Secondly, in your specific example, what you want is to fire an effect when dummyText updates so it can recalculate lines.

In order to do that, your effect looks like this:

  useEffect(() => {
    //something so that lines get updated if the user input changes?
  }, [dummyText]);

Thirdly, and most importantly, you shouldn't do that either because lines is not actually state of your Text component - it's just a computed value based on the dummyText prop. state is something your component owns, something it has created. Your Text component didn't create lines, it just calculated them based on the dummyText prop.

Allright, understood. What do you recommend me to do to achieve my desired result? Move the logic to the `Content` component because dummyText is state of that component? — Reinier68, Sep 11 '21 at 11:54

score 0 · Answer 2 · answered Sep 11 '21 at 13:43

In your Text component your useEffect function doesn't track the dummyText prop. Try to add it into dependency array, like this (Text.jsx, line 60):

  useEffect(() => {
    const { wordsWithComputedWidth, spaceWidth } = calculateWordWidths();
    const lines2 = calculateLines(wordsWithComputedWidth, spaceWidth, 400);
    setLines(lines2);
  }, [dummyText]);

React: how to use useEffect compared to componentDidUpdate?

2 Answers2