Avoiding re-render onBlur when using FormContext

[nagibr]

Hi,

I am having hard time understanding why every blur on any input causes all components including the container to re-render. My structure is bit complex with multiple levels of inputs. Please check the below structure,
structure for each component is passed down from registration page, which does not change.

Registration Page => Form(Form) -> form and FormContext is used here with useForm(onBlur). Initial values for all "Field"s being put into context via createContext
->Form => Panel(panels)
-->Panel => Table(tables)
--->Table => Field(fields) -> one of the Field is being watched in one of the Tables which has conditional rendering logic
---->Field ->get FormContext as well as initial value context and render each field

Now, whenever I focus or blur any field, the whole form re-renders. I tried to overcome this with approach given here, .
But even with this approach, I don't see any improvement.
Could you please let me know if this is how it works or am I doing something wrong?
Also, any other approach on improving performance while using FormContext would be appreciated.
Thanks

[bluebill1049]

need some more context. perhaps a codesandbox for your example (simple one not the whole app) which mode are u using too.

[nagibr]

sure, here's the link . When I enable component render highlighting in react dev tools, I see all fields being re-rendered on every blur or focus. Is there a way to restrict the re-render on other fields?
I am using onBlur and I would continue to use the same since user has to be alerted on blur on each field.

[bluebill1049]

If there is an Error, the whole form will get re-render which is expected.