How do i use useEffect() / useState() hooks here - reactjs

Question

I am new to React Js and learning to implement certain functionalities by developing a website. Here i need to implement something like this -
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter but on page load (not on button click)
But as we know that React has Hooks, which needs to be used while implementing functionalities in the project. So i tried to implement Hook, but need some help in using it, I researched some examples on internet but didn't understood and doesn't fit for my current requirement.
Main.js
import React, { useEffect } from 'react';
import '../App.css';
const Main = () => {
useEffect( () => {
var i = 0;
var txt = 'Some Text here lorem ipsum lorem ipsum';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("typingText").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
});
return(
<main>
<div className='row'>
<img src='image.png' height='auto' width='100%' alt="banner"/>
<div className='position-absolute top-50 start-0 translate-middle-y p-5'>
<div class="card bg-black" style={{width: '30%'}}>
<div class="card-body text-white fw-bold">
<h1 id="typingText"></h1>
</div>
</div>
</div>
</div>
</main>
);
export default Main;

Answer 1

First of all, you are missing the array of dependencies of the hook. This prop is extemely important, otherwise the useEffect hook will keep on calling, reaching an overflow of calls.
If I understand what you want, every x milliseconds the typed text should change. useEffect will do the work. In this case, as you want only to run when the component mounts, the dependency array of the hook will be empty ([]). Inside the hook, you can set up an interval, that keeps running the function that you want. With this brief explanation, you could do:
import React, { useEffect, useState } from 'react';
import '../App.css';
const Main = () => {
// We will keep track of how many letters are being displayed
const [index, setIndex] = useState(0);
const type = () => {
setIndex((prev) => Math.min(prev + 1, 50));
};
useEffect(() => {
const id = setInterval(type, 500);
// It is important to clear the interval when the component unmounts!
return () => clearInterval(id);
}, []); // We are setting an empty dep array
return (
<main>
<div className='row'>
<img src='image.png' height='auto' width='100%' alt='banner' />
<div className='position-absolute top-50 start-0 translate-middle-y p-5'>
<div class='card bg-black' style={{ width: '30%' }}>
<div class='card-body text-white fw-bold'>
<h1 id='typingText'>
{'Your text'.substring(0, index)}
</h1>
</div>
</div>
</div>
</div>
</main>
);
};
export default Main;
To sum up, what we are doing is:
Setting an interval to repeat after 500ms. As commented in the code, it is crucial to clear the interval once the component unmounts. The setInterval returns the identifier of the interval, which is used to identify the interval to remove with clearInterval.
Instead of using the window to manipulate the DOM, we keep track of the state, increasing the letters to display from our string.
Finally, we "cut" the string displaying from 0 to the current index, which will be incremented every 500ms, creating the typewritter effect.
Hope to have been clear!
I recommend you take a look at the react hooks documentation.