Organisation de mon code

Bonjour,
Je débute avec React js et javascript globalement après avoir développé pendant longtemps en java EE
Mon problème porte sur l'organisation et le découpage de mes codes
En effet, mon application est fait d'un ensemble de formulaires, ici je prendrais un cas typique de la fonctionnalité qui fait du CRUD sur une entité nomée societe
J'ai crée deux composants SocieteForm et SocieteList (j'espère que les nom sont parlant). Afin d'avoir un code clair et lisible, je crée une classe ManagedSociete qui contiendra la logique de mon application
voici à quoi ressemble le code final

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
export default function SocieteList(){
    const service=new ManagedSociete();
    const [societes, setSocietesList]=useState<Array<ISociete>>(service.societes);
    useEffect(()=>{
        setSocietesList(service.getSocietes());
    },[service.societes.length])
    const columns:GridColDef[]=[
        {field:"id", headerName:"Id", width:50},
        {field:"name", headerName:"Raison social", width:150}
    ];
    return(
         <div className="form_societe">
             <h1>Liste des sociétés <Button className="menu-list" component={Link} to="/societe/form">Revenir au formulaire</Button></h1>
            <DataGrid
            	columns={columns}
            	rows={societes}
           		 autoHeight={true} />
         </div>
    )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
export default function SocieteForm(){
    const {register, handleSubmit}=useForm<ISociete>();
    const service=new ManagedSociete();
    const saveForm:SubmitHandler<ISociete>=(data)=>{
    //on invoque la fonction save depuis notre classe service
        service.saveSociete(data);
    }
    return(
        <div className="form_societe" onSubmit={handleSubmit(saveForm)}>
            <h1>Formulaire société
                <Button className="menu-list" component={Link} to="/societe/list"
                 >Voir la liste</Button>
            </h1>
            <form className="fomulaire " >
                <Grid container spacing={2} justifyContent="space-between">
                    <Grid item md={10} xs={10}>
                        <TextField label="Désignation" variant="filled" color="primary" focused
                        fullWidth  {...register("name")}/>
                    </Grid>
                    <Grid item md={2} xs={2}>
                        <TextField label="Forme Juridique" variant="filled"
                                   fullWidth {...register("formeJuridique")} />
                    </Grid>
                    <Grid item  >
                       <Button variant={"contained"} type={"submit"}>Enregistrer</Button>
                    </Grid>
                </Grid>
            </form>
        </div>
    )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
import {ISociete} from "./ISociete";
 
export class ManagedSociete{
    private societe:ISociete;
    societes=new Array<ISociete>();
 
    saveSociete(societe:ISociete){
        this.societes.push(societe)
    }
 
    getSocietes():Array<ISociete>{
        return this.societes;
    }
 
}

Ce que je veux:
Je voudais pouvoir modifier le state de mon composant SocieteList avec la liste societes (déclarer dans ma classe ManagedSociete ) et invoqué depuis le composant SocieteForm

J'aimerais également savoir si cette architechture convient dans le monde javascript/React

Merci d'avance pour vos réponses