React formReducer in context causing rerender with each keystroke - reactjs

Question

I am trying to architecture a React form which uses functions and data from context.
I have a formReducer which is used by one of the context state values.
export const FormContext = createContext({});
function formReducer(state, event) {
if (event.name.startsWith("address") && event.name.split(".").length > 1) {
var updateField = event.name.split(".")[1];
return {
...state,
address: { ...state.address, [updateField]: event.value },
};
} else if (
event.name.startsWith("hours") &&
event.name.split(".").length > 1
) {
var updateField = event.name.split(".")[1];
return {
...state,
hours: { ...state.hours, [updateField]: event.value },
};
}
return {
...state,
[event.name]: event.value,
};
}
export const FormProvider = (props) => {
const { children } = props;
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useReducer(formReducer, {
name: "",
address: { line1: "", city: "", state: "", zip: "" },
phone: "",
contact: "",
hours: {
monday_start: "",
tuesday_start: "",
wednesday_start: "",
thursday_start: "",
friday_start: "",
saturday_start: "",
sunday_start: "",
monday_end: "",
tuesday_end: "",
wednesday_end: "",
thursday_end: "",
friday_end: "",
saturday_end: "",
sunday_end: "",
},
});
const [page, setPage] = useState(1);
const [showModal, setShowModal] = useState(false);
function fetchClientData(id) {
return fetch(
`api-call`
)
}
function handleSubmit(e) {
e.preventDefault();
fetch(
"api-call",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ ...formData, page: page }),
}
)
}
const formContext = {
fetchClientData,
formData,
setFormData,
};
return (
<FormContext.Provider value={formContext}>{children}</FormContext.Provider>
);
};
In my form component I pull in these values from context
const {
fetchClientData,
formData,
handleSubmit,
isSubmitting,
page,
setFormData,
setIsSubmitting,
setPage,
setShowModal,
showModal,
} = useContext(FormContext);
And anytime an input field changes I update the context state.
function handleChange(e) {
const { name, value } = e.target;
setFormData({
name: name,
value: value,
});
}
If I understand context correctly components that consume context will rerender each time a context state changes.
I am wondering how I can better design my app to avoid this problem. Ideally I don't want to bog down my component with all of these functions and state variables, but I also don't want my component to constantly rerender.