DEV Community

Discussion on: React: How to create a reusable form using React Context

eecolor profile image

Hi, you are using FormContext.Provider with a non-primitive value. This causes the context to trigger a render in its users every time the provider is rendered. You should use a React.memo to prevent that.

In order to correct use a React.memo you should use your handleFormChange in a React.useCallback.

Another thing to note here is that all of your form fields will render on each change (for example when a user is typing) in a single form field.

You can check out existing React form libraries. Some of them use a context with event listeners, other use event listeners without a context to achieve this. An example: