React-admin: [Performance]Too many request to API endpoint when using ReferenceInput and ReferenceArrayInput

[tunglt1810]

Hi, first words, thanks for your awesome project.

I have use ReferenceInput and ReferenceArrayInput in my form like this:

<ReferenceArrayInput source="parentRoleIds" reference="roles">
                <CheckboxGroupInput optionValue="id" optionText="name"/>
</ReferenceArrayInput>

But when i check the checkbox, this component send too much request to server. I think it's not necessary.

After the input mounted and load reference data. It's should be not need load reference data again when changing the value of input

[djhi]

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[tunglt1810]

Hi @djhi , it's my mistake of using "word". I've update this post

[djhi]

Thanks for reporting this. If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

• CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple)
• A sample application via GitHub

[fzaninotto]

I can confirm the problem on the simple example:

• Open PostEdit

• Change tags input to use CheckboxGroupInput:

              <ReferenceArrayInput
                  reference="tags"
                  source="tags"
                  filter={{ published: true }}
              >
                  <CheckboxGroupInput optionText="name" />
              </ReferenceArrayInput>
  

Each click on a checkbox calls the dataProvider, as seen on this screenshot:

[fzaninotto]

The problem comes from ReferenceArrayInputController, who fetches references each time the value changes:

https://github.com/marmelab/react-admin/blob/5ec9cd6df2eb2322242560e518c000f8a124f2d4/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx#L170-L203

I'm not sure we can change that, as it's necessary to force fetching of actual values when the parent updates...

[fzaninotto]

The best we could do is first check if the values aren't in the options, and only then trigger a fetchReferences.

[fargito]

Hello !

Thanks for the project :)
I'm trying to solve the issue, I will try to get back tomorrow with something ;)

[boutdemousse]

Same behavior with the 2.9.3 version.
Tested using the same method and updating the package.json.

I have the same problem on my side with text inputs.
A request is sent for each key press and when the element lose the focus which makes quite a ton of requests in a very short period of time and it also makes the UI is very laggy.

[tunglt1810]

Same behavior with the 2.9.3 version.
Tested using the same method and updating the package.json.

I have the same problem on my side with text inputs.
A request is sent for each key press and when the element lose the focus which makes quite a ton of requests in a very short period of time and it also makes the UI is very laggy.

me too

[x5engine]

@fzaninotto actually this componentWillReceiveProps is deprecated better move to componentDidUpdate for a side effect.