Hello! I was using Angular for like 3 years and recently I decided to switch to React, mostly because you have a lot more freedom to do things your way. The problem that I'm facing now is how to manage my code, I just end up having ugly components with a lot of code and JSX. For example (also I'm not sure how to split **useCallback** functions to different files): ```typescript import React from "react"; import styles from './RegisterForm.module.css'; import * as MuiMat from '@mui/material'; import * as MuiIcons from '@mui/icons-material'; import GlobalContext from "../../../context/global-context"; import { AccountModel } from "../../../models/account.model"; interface RegisterFormI { onFormSubmit(account: AccountModel): void } interface PasswordStateI { pass : string passValid : boolean passError : string rePass : string rePassValid : boolean rePassError : string passMatch : boolean } const RegisterForm: React.FC = (props)=> { const globalCTX = React.useContext(GlobalContext); const [username, setUsername] = React.useState(''); const [usernameError, setUsernameError] = React.useState(''); const [usernameValid, setUsernameValid] = React.useState(true); const [email, setEmail] = React.useState(''); const [emailError, setEmailError] = React.useState(''); const [emailValid, setEmailValid] = React.useState(true); const [pass, setPass] = React.useState({ pass: '', passValid: true, passError: '', rePass: '', rePassValid: true, rePassError: '', passMatch: true }); //Reused in single state forms. const handlerFunctionality = React.useCallback( (value: string, setField: any, setFieldValid: any, setFieldError: any)=> { setField(value); if (value.trim().length === 0) { setFieldValid(false); setFieldError(globalCTX.locale.required); } else { setFieldValid(true); } }, [globalCTX]); //Username Handler (Single state) const onUsernameHandler = React.useCallback( (obj)=> { let v = obj.target.value as string; handlerFunctionality(v, setUsername, setUsernameValid, setUsernameError); }, [handlerFunctionality]); //Email Handler (Single state) const onEmailHandler = React.useCallback( (obj)=> { let v = obj.target.value as string; handlerFunctionality(v, setEmail, setEmailValid, setEmailError); }, [handlerFunctionality]); //Pass Handler (Multiple states in one object) const onPassHandler = React.useCallback( (obj)=> { let v = obj.target.value as string; if (v.trim().length === 0) { setPass( (prevState: PasswordStateI): PasswordStateI=> { let match = pass.rePass === v; return {...prevState, pass: v, passValid: false, passError: globalCTX.locale.required, passMatch: match}; }); } else { setPass( (prevState: PasswordStateI): PasswordStateI=> { let match = pass.rePass === v; return {...prevState, pass: v, passValid: true, passMatch: match}; }); } }, [globalCTX, pass]); //RePass Handler (Multiple states in one object) const onRePassHandler = React.useCallback( (obj)=> { let v = obj.target.value as string; if (v.trim().length === 0) { setPass( (prevState: PasswordStateI): PasswordStateI=> { let match = pass.pass === v; return {...prevState, rePass: v, rePassValid: false, rePassError: globalCTX.locale.required, passMatch: match}; }); } else { setPass( (prevState: PasswordStateI): PasswordStateI=> { let match = pass.pass === v; return {...prevState, rePass: v, rePassValid: true, passMatch: match}; }); } }, [globalCTX, pass]); //Check form validity as a whole. const checkFormValidity = React.useCallback((): boolean=> { let valid = true; if (username.trim().length === 0) { setUsernameValid(false); setUsernameError(globalCTX.locale.required); valid = false; } if (email.trim().length === 0) { setEmailValid(false); setEmailError(globalCTX.locale.required); valid = false; } if (pass.pass.trim().length === 0) { setPass( (prevPass: PasswordStateI):PasswordStateI=> { return {...prevPass, passValid: false, passError: globalCTX.locale.required} }); valid = false; } if (pass.rePass.trim().length === 0) { setPass( (prevPass: PasswordStateI):PasswordStateI=> { return {...prevPass, rePassValid: false, rePassError: globalCTX.locale.required} }); valid = false; } return valid; }, [username, email, pass, globalCTX]); //Submit Form Functionality. const {onFormSubmit} = props; const onSubmit = React.useCallback(()=> { let account: AccountModel = new AccountModel(); if ( !checkFormValidity() ) return; account.m_username = username; account.m_email = email; account.m_password = pass.pass; onFormSubmit(account); }, [username, email, pass, onFormSubmit, checkFormValidity]); //Rendering. const margins = '1rem'; return ( ); }; export default RegisterForm; ``` Any suggestions? Thanks. Other suggestions about my code (for example state management) are welcome as well.

babaliaris

New to react. Any suggestions for code management and maintainability?

Join Our Newsletter. No Spam, Only the good stuff.