I am using the redux to hide and show components based on a value.
The Redux form documentation mentions the following:
Connecting to multiple fields should be used sparingly, as it will require the entire component to re-render every time any of the fields it is connected to change. This can be a performance bottleneck. Unless you absolutely need to, you should connect to your fields individually with .
I am unclear if my solution to hiding and showing fields based on radio buttons is good enough to use Fields
giving the warning to use sparingly.
Can you please clarify if my component merits enough reason to use Fields
. If not, what is an alternative way to implement?
Also, how does fields
implement validations?
<div>
<form>
<Fields
component={RadioButtonGroupField}
names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']}
/>
</ form>
</div>
function RadioButtonGroupField(fields) {
return(
<div>
<RadioButtonGroupComponent
{...fields.radioButtonGroup.input}
{...fields.radioButtonGroup.meta}
/>
{
(fields.radioButtonGroup.input.value === 'name' ||
fields.radioButtonGroup.input.value === 'both') &&
<NameTextFieldComponent
{...fields.radioButtonGroup.input}
{...fields.radioButtonGroup.meta}
/>
}
{
(fields.radioButtonGroup.input.value === 'nickname' ||
fields.radioButtonGroup.input.value === 'both') &&
<NicknameTextFieldComponent
{...fields.radioButtonGroup.input}
{...fields.radioButtonGroup.meta}
/>
}
</div>
);
}