Tengo un formulario con un par de campos renderizados condicionalmente. El formulario está compuesto por componentes MUI, react-hook-form y sí para su validación.
Además, he agregado un archivo console.log console.log() dentro de los componentes AutocompleteCoffee , RadioBtnGroup , TxtField que se ejecutará cada vez que se representen los componentes.
Guión
Cuando se carga la página, puede ver un registro de cada componente. Nada nuevo aquí.
Cuando selecciona "Sí" de ¿Te gusta el café? se representará un nuevo campo. Esta acción activa una nueva representación de todos los componentes de la página.
Estoy usando el método de watch de la forma de gancho de reacción para realizar un seguimiento de la pregunta mencionada anteriormente.
const coffee = watch("coffee", "No"); ... {coffee === "Yes" ? ( <AutocompleteCoffee required fullWidth name="coffeType" label="Which coffee type" control={control} options={coffeList} error={!!errors.coffeType} helperText={errors?.coffeType?.message} /> ) : null} ...Puede ver el CodeSandbox en funcionamiento aquí .
Pregunta
Me preguntaba cómo evitar todos los renders desperdiciados. ¿Algunas ideas?
¡Gracias de antemano!
Tengo este problema de rendimiento una vez. Según los documentos , debe cambiar a la forma de devolución de llamada de watch de llamada o usar Watch
This API will trigger re-render at the root of your app or form, consider using a callback or the useWatch API if you are experiencing performance issues.el código se vería así:
en lugar de su cheque de café, haga <MaybeCoffee control={control} errors={errors} /> y elimine el reloj ("café", "No") también.
Luego agregue un componente MaybeCoffee:
const MaybeCoffee = ({ control, errors }) => { const coffee = useWatch({ control, name: "coffee" }) || "No"; return coffee === "Yes" ? ( <AutocompleteCoffee required fullWidth name="coffeType" label="Which coffes type" control={control} options={coffeList} error={!!errors.coffeType} helperText={errors?.coffeType?.message} /> ) : null; }un ejemplo https://codesandbox.io/s/testing-rerenders-forked-19invg?file=/src/components/MainForm.js