Unform: useField in a infinity loop with the React useRef

[EduardoAraujoB]

Description of bug

I've a problem to chage a value in the useField method of unform with the React useRef and the useEffect hook

To Reproduce

1 - Create a component an atrribute to an input the ref of the React
2 - Use the registerField method of unform useField ant try to change your value in a useEffect hook
3 - Start the project an open the console, now you will see that the component is in an infinity loop

Expected behavior

I don't know why the component is in an infinity loop, so if you have an idea, please tell me what is happen

Exception or Error

import React, { useState, useRef, useEffect } from 'react';
import { useField } from '@rocketseat/unform';
import api from '~/services/api';

import { Container } from './styles';

export default function AvatarInput() {
  const { defaultValue, registerField } = useField('avatar');

  const [file, setFile] = useState(defaultValue && defaultValue.id);
  const [preview, setPreview] = useState(defaultValue && defaultValue.url);

  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      registerField({
        name: 'avatar_id',
        ref: ref.current,
        data: 'dataset.file',
      });
    }
  }, [ref, registerField]);

  async function handleChange(e) {
    const data = new FormData();

    data.append('file', e.target.files[0]);

    const response = await api.post('files', data);

    const { id, url } = response.data;

    setFile(id);
    setPreview(url);
  }
}

Note: I can't paste the return of the component because it don't is shown in the preview

Screenshots

Environment:

• OS: Windows 10
• Browser Chrome
• React Version: 16.10.2
• Unform Version: 1.6.1

[jpdemagalhaes]

Hey @EduardoAraujoB

Your problem is happening because you're telling useEffect to listen to the wrong variables.

As it states on our documentation here the correct usage for a custom element is:

  useEffect(() => {
    if (ref.current) {
      registerField({
        name: 'avatar_id',
        ref: ref.current,
        data: 'dataset.file',
      });
    }
  }, [ref.current, fieldName]);

I'll be closing this issue since this problem is not related to Unform per se. But if you feel like we missed something, feel free to reopen this 💜

Thanks!

[EduardoAraujoB]

hey @jpdemagalhaes , i updated my code, but i can't submit my form because i recive the follow error:

parent component:
https://cl1p.net/parentcomponent

child component:
https://cl1p.net/childcomponent

Is it a problem with unform or i'm usingit the wrong way?

Obs: I use this site to share my code to you see the return of the components

[fnoquiq]

Description of bug

I've a problem to chage a value in the useField method of unform with the React useRef and the useEffect hook

To Reproduce

1 - Create a component an atrribute to an input the ref of the React
2 - Use the registerField method of unform useField ant try to change your value in a useEffect hook
3 - Start the project an open the console, now you will see that the component is in an infinity loop

Expected behavior

I don't know why the component is in an infinity loop, so if you have an idea, please tell me what is happen

Exception or Error

import React, { useState, useRef, useEffect } from 'react';
import { useField } from '@rocketseat/unform';
import api from '~/services/api';

import { Container } from './styles';

export default function AvatarInput() {
  const { defaultValue, registerField } = useField('avatar');

  const [file, setFile] = useState(defaultValue && defaultValue.id);
  const [preview, setPreview] = useState(defaultValue && defaultValue.url);

  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      registerField({
        name: 'avatar_id',
        ref: ref.current,
        data: 'dataset.file',
      });
    }
  }, [ref, registerField]);

  async function handleChange(e) {
    const data = new FormData();

    data.append('file', e.target.files[0]);

    const response = await api.post('files', data);

    const { id, url } = response.data;

    setFile(id);
    setPreview(url);
  }
}

Note: I can't paste the return of the component because it don't is shown in the preview

Screenshots

Environment:

• OS: Windows 10
• Browser Chrome
• React Version: 16.10.2
• Unform Version: 1.6.1

Estava com o mesmo problema, o código que o Diego escreve durante as aulas do bootcamp fica desta forma:

useEffect(() => {
    if (ref.current) {
      registerField({
        name: 'avatar_id',
        ref: ref.current,
        data: 'dataset.file',
      });
    }
  }, [ref, registerField]);

Portanto o correto seria assim:

 useEffect(() => {
    if (ref.current) {
      registerField({
        name: 'avatar_id',
        ref: ref.current,
        path: 'dataset.file',
      });
    }
  }, [ref.current]);

Vou deixar o erro abaixo, somente pro pessoal do google chegar aqui mais fácil:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

AvatarInput (at Profile/index.js:22)
    in form (created by w)
    in w (at Profile/index.js:21)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at Profile/index.js:20)
    in Profile (at Route.js:32)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at default/index.js:10)
    in DefaultLayout (at Route.js:31)
    in Route (at Route.js:28)
    in RouteWrapper (at routes/index.js:16)
    in Switch (at routes/index.js:13)
    in Routes (at App.js:21)
    in Router (at App.js:20)
    in PersistGate (at App.js:19)
    in Provider (at App.js:18)
    in App (at src/index.js:5)

[augustto]

obrigado pela dica Gabriel