How to prevent rendering a new state of an useReducer hook each time?

There is a problem with useReducer in React. As I change the inputs value, there is a new render of state in useReducer. How can I render the same state of the useReducer?

officeReducer:

export const INITIAL_STATE = {
    name: "",
    surname: "",
};

const ACTIONS = {
    CHANGE_INPUT: "CHANGE_INPUT",
}

export const officeReducer = (state, action) => {
    switch (action.type) {
      case ACTIONS.CHANGE_INPUT:
          return {
              ...state,
              [action.payload.name]:action.payload.value
          }
      default: {
          return state
      }
  }
}

InputType.js:

import {useReducer, useState} from "react";
import {officeReducer, INITIAL_STATE} from "../../functions/officeReducer";

export const InputType = (props) => {
    const [text, setText] = useState()
    const [state, dispatch] = useReducer(officeReducer, INITIAL_STATE)

    function handleChange(e) {
      dispatch({ type: "CHANGE_INPUT", payload: {name: e.target.name, value: e.target.value}})
    }

    console.log(state) **//FOR EXAMPLE, AS WE TYPE SMTH IN NAME INPUT THERE IS AN OBJ IN CONSOLE: {name: "MIKE", surname: ""}, THEN WE TYPE INTO A SURNAME INPUT AND WE GET {name: "", surname: "JORDAN"}. The question is: why don't we get {name: "MIKE", surname: "JORDAN"}?**

    return (
      <div className={styles.inputBox}>
        <input id={props.id} type={props.type} required={props.required} name={props.name} onChange={handleChange}/>
        <label htmlFor={props.id} className={text && styles.inputFilled}>{props.placeholder}</label>
      </div>
    )
}

Office.js:

const Office = () => {
return (
    <div className={styles.dataBox}>
      <div className={styles.dataInputs}>
        <InputType placeholder={'Surname'} name={'surname'} required={true} type={'text'}/>
        <InputType placeholder={'Name'} name={'name'} required={true} type={'text'}/>
      </div>
    </div>
  )
}

Have tried to move useReducer to Office component. It works well, but there is a redundant render of Office component.

Solution

Forms are one of the few areas in react where you should be reasonably performance minded, if you find yourself running into performance issues. If you don't have performance issues, then don't worry about it and don't do anything until you run into performance issues. They're easy to solve when you have them, trying to solve them before you have them is not a good idea.

There's a hundred things you can do, but they all depend on your specific application.

If you don't need to know the values before you submit the form, don't even store them in state, just get them in your onSubmit function by using DOM APIs or React refs
A really easy way to minimize rerenders is to use onBlur instead of onChange and update your state after the user tabs away from the input. This works if it suits your applications UI requirements
Anything more fine-grained than that and you should be leaning into a highly-tuned form library like react-hook-form and learn how to use it. It's exceptional at what it does, but every library comes with a learning curve and you should be prepared to invest a little time into learning how to use it properly.

Of course, if you are not experiencing any performance problems right now, but are worried about performance in the future, I would urge you to not do anything until you actually have a problem