Execute a function after rendering in React

Question

Good morning/afternoon everyone,

I've been using React for a few months. I'm trying to avoid using the React Components, instead I use the React Hooks, but I have to admit that there are times when my goals get complicated.

One of those moments is when executing a function only once after rendering the component. In my case I want to execute a recursive function (typeText) only once after all the components have been rendered.

Here is the link to CodeSandbox of the project (React): https://codesandbox.io/s/execute-after-rendering-jzz87
This is what I would like to achieve (Static): https://codesandbox.io/s/type-effect-jfzhl

Below there is an example of the react project:

import React, { useEffect, useState } from "react";

export default function App() {
  const [word, setWord] = useState("");

  const list = ["Bag", "Door", "Shelving"];

  let isWriting = true;
  let selectedWord = 0,
      position = 0,
      delay = 0;

  const typeText = () => {
    if (isWriting === true) {
      if (position < list[selectedWord].length) {
        setWord(word + list[selectedWord].charAt(position++));
        delay = 100;
      } else {
        isWriting = false;
        delay = 1500;
      }
    } else {
      if (word.length > 0) {
        setWord(word.substring(0, word.length - 1));
        delay = 40;
      } else {
        isWriting = true;
        selectedWord = (selectedWord + 1) % list.length;
        position = 0;
        delay = 300;
      }
    }

    setTimeout(() => typeText(), delay);
  };

  useEffect(() => {
    typeText();
  }, []);

  return (
    <div className="App">
      <h1>{word}</h1>
    </div>
  );
}

Thank you very much to all of you for your help, greetings and a hug!

And whats the problem?

Rashomon
– Rashomon

2021-02-04 09:35:31 +00:00
Commented Feb 4, 2021 at 9:35 — Rashomon
– Rashomon, Commented Feb 4, 2021 at 9:35
see this

gmoniava
– gmoniava

2021-02-04 10:49:45 +00:00
Commented Feb 4, 2021 at 10:49 — gmoniava
– gmoniava, Commented Feb 4, 2021 at 10:49

dev · Accepted Answer · 2021-02-04 09:37:16Z

4

What you posted isn't React code though, would you mind posting the React part? In any case, in hooks, to run something once after rendering, just use the useEffect hook:

const MyComponent = () => {
  useEffect(() => {
    // your code here
  }, []);

  return <Whatever you="are rendering" />;
};

answered Feb 4, 2021 at 9:37

dev

8609 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fernando Pérez Lara Over a year ago

Sorry for the misunderstanding, the project link is codesandbox.io/s/execute-after-rendering-jzz87 The published code is what I would like to achieve.

Collectives™ on Stack Overflow

Execute a function after rendering in React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related