Creo que esta es la forma correcta de hacerlo. Los estados simples son una buena manera de usarlos. Creo que es una mejor práctica no usar '' como estado inicial sino null . Para que no haya confusión posible.

Puede usar el gancho useReducer o también puede usar useSetState personalizado, que funciona de manera similar a cómo funciona this.setState en componentes de clase. Combina los cambios de objetos en el estado actual.

Si los datos recibidos de la API de back-end son un objeto que contiene los detalles del usuario, como el nombre y el correo electrónico, etc., entonces no debería tener variables de estado separadas para todas y cada una de las propiedades. En su lugar, debe guardar todo el objeto de usuario en una sola variable de estado. Si lo necesita, puede desestructurarlo más tarde así:

 const User = ({ props }) => { // good const [user, setUser] = useState({}); const { name, email } = user; //bad const [name, setName] = useState(""); const [email, setEmail] = useState(""); };

Esto puede ayudarte. Mejor uso useReducer

 import { useReducer } from "react"; const studentInitState = { name: null, surname: null, rollNo: null, phone: null, email: null }; function Test(props) { const [student, setStudent] = useReducer( //--> below line implies. that take old state & update the current state and return the `new state` this is called a `Reducer` function. (student, newDetails) => ({ ...student, ...newDetails }), studentInitState ); return ( <div> <button onClick={() => setStudent({ name: "Sachin" })}>Update</button> {student.name} </div> ); } export default Test;