i have this problem programming in Next.js 13. I really appreciate any help or suggestion =), here are the files:

typingtext.tsx

import React from "react";

export function useTypedText(text: string, speed: number, delayTime?: number) {
  const [textState, setTextState] = React.useState("")
  const chars = text.split("")
  let interval = speed

  if(textState.length === 0 && delayTime)
    interval = speed   delayTime

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setTextState((prevText) => {
        if (prevText.length !== chars.length) {
          const newText = prevText.concat(chars[prevText.length])
          return newText
        }
        return prevText
      })
    }, interval)
    return () => clearTimeout(timer)
  })

  return textState
}

mainheader.tsx:

import React from 'react';
import { useTypedText }  from '../typingtext';

export function VMainHeader() {
  return (
    <div>
      <h1>
        {useTypedText("Hello everyone!", 50)}
        <br/>
        {useTypedText("I'm Diego.", 50, 200)}
      </h1>
      <h2>
        {useTypedText("Welcome", 30, 350)}
      </h2>
    </div>
  )
}

home.tsx

import React from "react"
import { VMainHeader } from "./mainheader"
export default function VHome(){
  return(
    <div>
      <VMainHeader />
    </div>
  )
}

Im expecting know what happening, because i already try with

import { useState, useEffect } from "react";

in the typingtext.tsx file but it doesn't work

CodePudding user response：

I assume that you try to create a custom hook useTypedText. Don't use in the return. You probably want to change it to a component instead, rename it to TypedText and you need to at least wrap the state in framgent.

return <>{textState}</>

CodePudding user response：

Okay, i already fix this error so im writing now this to help people like me because i think that is a new feature of Next.js 13 or idk, im noob in Next xD.

It works for me when i wrote "use client" into the top of my mainheader.tsx file:

"use client"
import React from 'react';
import { useTypedText }  from '../typingtext';

export function VMainHeader() {
  return (
    <div>
      <h1>
        {useTypedText("Hello everyone!", 50)}
        <br/>
        {useTypedText("I'm Diego.", 50, 200)}
      </h1>
      <h2>
        {useTypedText("Welcome", 30, 350)}
      </h2>
    </div>
  )
}

Thank you very much to those who tried to help me <3.