Title rewritten to: Dynamic component import in Vite with React and typescript causing failure in fast refresh-PHP Chinese Network Q&A

I'm trying to create a multi-step form and I'm putting the data in a separate file for constants like this

import {lazy} from "react";

export const steps = [ { id: 0, name: 'Personal Info', component: lazy(() => import('../components/PersonalInfo')), }, ];

I pass it to the custom hook in the context

const dataSteps = useMultiStep(steps); const { next, back, currentStep, isFirst } = dataSteps;

This is a custom hook

import { useState } from 'react'; import { MultistepProps } from '../@types/Multiform'; const useMultiStep = (steps: MultistepProps[]) => { const [step, setStep] = useState(0); const isLast = step === steps?.length - 1; const isFirst = step === 0; const next = (): void => { if (isLast) return; setStep((current) => current + 1); }; const back = (): void => { if (isFirst) return; setStep((current) => current - 1); }; return { step, next, back, currentStep: steps[step], isFirst, }; }; export default useMultiStep;

I am using dynamic components here

import FormInterface from './interface/FormInterface'; import useApp from './hooks/useApp'; import { Suspense } from 'react'; function App() { const data = useApp(); const { currentStep, next, back, isFirst } = data; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); next(); }; return (   {currentStep.component && ( <>  {currentStep?.name} 
 Loading...

reply all (1)

P粉5485126372023-11-11 11:35:58 1 floor

Your state seems to be lost when you update the component (probably because the useApp() hook returnsnullbefore the data is ready).

Try to wrap stateful components in React memo(). This way, your component state is preserved during HMR updates.

For example wrap the useApp hook in a useMemo hook to ensure it is only called once:

const data = useMemo(() => useApp(), []);

In summary, this will ensure that the useApp hook is only called once and its return value is remembered, even if the component is re-rendered due to HMR.