input.onChange has a new reference each time value changes

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Every time a field value changes, onChange gets a new reference (and maybe other event handlers do as well).

What is the expected behavior?

When building a custom field and using useEffect, it’s frequent to depend on onChange to update a value. In my case for a large field, I use useMemo to make sure I only rerender the parts that need it, but onChange makes sure everything gets updated every time the value changes. Is there another way than useCallback(input.onChange, [])?

Sandbox Link

https://codesandbox.io/s/react-final-form-third-party-components-example-lo4yo?file=/index.js

What’s your environment?

(Latest on every lib, as seen on the sandbox)

Other information

/

Thanks in advance!

[erikras]

Here’s a test I wrote when investigating this. Please include it in the PR.

  it('should give same instance of handlers as value changes', () => {
    const spy = jest.fn()
    const MyField = ({ name }) => {
      const { input } = useField(name, { subscription: { value: true } })
      const { onChange, onFocus, onBlur } = input
      spy(onChange, onFocus, onBlur)
      return <input {...input} />
    }
    render(
      <Form onSubmit={onSubmitMock}>
        {() => (
          <form>
            <MyField name="myField" />
          </form>
        )}
      </Form>
    )

    expect(spy).toHaveBeenCalledTimes(2)
    const [onChange, onFocus, onBlur] = spy.mock.calls[1]
    const setValue = value => {
      act(() => {
        onFocus()
        onChange(value)
        onBlur()
      })
    }
    setValue('dog')
    expect(spy).toHaveBeenCalledTimes(3)
    expect(spy.mock.calls[2][0]).toBe(spy.mock.calls[1][0]) // onChange
    expect(spy.mock.calls[2][1]).toBe(spy.mock.calls[1][1]) // onFocus
    expect(spy.mock.calls[2][2]).toBe(spy.mock.calls[1][2]) // onBlur
    setValue('cat')
    expect(spy).toHaveBeenCalledTimes(4)
    expect(spy.mock.calls[3][0]).toBe(spy.mock.calls[1][0]) // onChange
    expect(spy.mock.calls[3][1]).toBe(spy.mock.calls[1][1]) // onFocus
    expect(spy.mock.calls[3][2]).toBe(spy.mock.calls[1][2]) // onBlur
    expect(spy.mock.calls[3][0]).toBe(spy.mock.calls[2][0]) // onChange
    expect(spy.mock.calls[3][1]).toBe(spy.mock.calls[2][1]) // onFocus
    expect(spy.mock.calls[3][2]).toBe(spy.mock.calls[2][2]) // onBlur
  })

[erikras]

we guarantee that identity of the methods are stable from the very start, the same way react guarantees that dispatch or setState identity is preserved throughout rerenders.

That’s the winning argument, I think. Callbacks a library gives you should be instance-stable across renders.

This will be a breaking change. @kapral18, can you PR this change?