- {/* TODO What is wrong with the position 1? */}
+
diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx
index 50a3f01..917f764 100644
--- a/src/components/Typewriter.tsx
+++ b/src/components/Typewriter.tsx
@@ -4,13 +4,18 @@ import { dotFont } from '../fonts/fonts'
const Typewriter = ({ text }: { text:string }) => {
const index = useRef(0);
const [currentText, setCurrentText] = useState('');
-
- useEffect(()=>{
- setTimeout(()=>{
- setCurrentText((value) => value + text.charAt(index.current));
+
+ useEffect(() => {
+ if (index.current < text.length) {
+ const nextChar: string = text.charAt(index.current);
+ const timer = setTimeout(() => {
+ setCurrentText(val => val + nextChar);
index.current++;
- }, 80);
- }, [currentText]);
+ }, 80);
+
+ return () => clearTimeout(timer);
+ }
+ }, [currentText, text]);
return >{currentText}
};