۳ نکته برای بهبود کد در React

import { useState } from "react";

const App = () => {
	const [user, setUser] = useState({
	  name: "",
	  family: "",
	  job: ""
	});
  
	// handler for name
	const handleName = (e) => {
	  setUser((prev) => ({
		...prev,
		name: e.target.value
	  }));
	};
  
	// handler for family
	const handleFamily = (e) => {
	  setUser((prev) => ({
		...prev,
		family: e.target.value
	  }));
	};
  
	// handler for job
	const handleJob = (e) => {
	  setUser((prev) => ({
		...prev,
		job: e.target.value
	  }));
	};
  
	return (
	  <div>
		<input value={user.name} onChange={handleName} />
		<input value={user.family} onChange={handleFamily} />
		<input value={user.job} onChange={handleJob} />
	  </div>
	);
  }
  export default App

import { useState } from "react";

const App = () => {
	const [user, setUser] = useState({
	  name: "",
	  family: "",
	  job: ""
	});
  
	const handleInput = (field) => {
	  return (e) => {
		setUser((prev) => ({
		  ...prev,
		  [field]: e.target.value
		}));
	  };
	};
  
	return (
	  <div>
		<input value={user.name} onChange={handleInput("name")} />
		<input value={user.family} onChange={handleInput("family")} />
		<input value={user.job} onChange={handleInput("job")} />
	  </div>
	);
  }

  export default App

// EXAMPLE : CHILD
// i have Form component for generate multi form
const Form = ({type}) => {
    let FormComponent = AllForm;
  
    if (type === 'monthly') {
        FormComponent = MonthlyForm
    }
  
    if (type === 'daily') {
        FormComponent = DailyForm
    }
  
    if (type === 'year') {
        FormComponent = YearForm
    }
  
    return (
      <div>
        <FormComponent />
      </div>
    )
}

export default Form;

//EXAMPLE : PARENT
import Form from "./Form";

const App = () => {
  
	return (
	  <div>
		{/* Generate From from type */}
		<Form type="monthly"/>
	  </div>
	);
  }

  export default App

const Form_Types = {
    'monthly': MonthlyForm,
    'daily': DailyForm,
    'year': YearForm,
    'all': AllForm,
  }
  
const GoodForm = ({type}) => {
    let FormComponent = Form_Types[type]
  
    return (
      <div>
        <FormComponent />
      </div>
    )
}

export default GoodForm

const App = () => {
const name = "Ali"

  return(
	<h1>Hello {name}</h1>
  )
}
export default App

//I define the NAME outside component
const NAME = "Ali"

const App = () => {
	
	  return(
		<h1>Hello {name}</h1>
	  )
}
export default App