Una mejora puede ser:

 function getLabel(type) { switch (type) { case "operator": return "conseiller"; case "supervisor": return "superviseur"; case "me": return 'Moi'; } } function renderSocialSupervisor() { const isMe = lastMessage?.author?._id === authUser._id; const label = getLabel(isMe ? 'me' : lastMessage?.author?.type); return isLoading || lastMessage?.type !== "text" ? null : ( <span>{label}: {lastMessage?.author?.name}</span> ); } function renderSocialOperator() { const isMe = lastMessage?.author?._id === authUser._id; const label = getLabel( lastMessage?.author?.type === "operator" ? "me" : lastMessage?.author?.type ); return isLoading || lastMessage?.type !== "text" ? null : ( <span> {label}: {lastMessage?.author?.name} </span> ); } return ( <p> {socialSupervisor && renderSocialSupervisor()} {socialOperator && renderSocialOperator()} </p> );

Sería mejor escribir componentes separados y pasarles los accesorios correctos. Cuanta menos lógica ponga dentro de una declaración de devolución de un solo componente, mejor.

Desestructurar accesorios/variables anidados:

lastMessage para {author, type}

O incluso refactorizar nombres de autor y en lugar de _id y tipo a author_id y author_type, para que pueda desestructurarlos fácilmente:

{{author_id, author_type}, type}

Comenzaré preguntándole cuáles son los tipos de accesorios socialOperator socialSupervisor Puedo adivinar que son valores booleanos (verdadero o falso), así que si uno de ellos es verdadero, ¿significa que el otro accesorio será falso? Si la respuesta es afirmativa, puede usar el operador ternario para representar el componente con una propiedad (puede decidir cuál dejar).

 { socialSupervisor ? <span>Social supervisor render</span> : <span>Social operator render</span> }

En segundo lugar, descubrí que reutiliza sus span s, comparten las mismas clases y solo varían en su contenido. Si me preguntas, crearía una función que devuelva el nombre del autor. Luego, crearía una función que devuelva un lapso con el contenido que necesito.

 const getAuthorLabel = (type, name) => { switch (type) { 'me': return 'Moi: '; 'supervisor': return `superviseur: ${name}`; 'operator': return `conseiller: ${name}`; default: return ''; } } const getAuthLabel = ({ author, type }) => { const isMe = author?._id === authUser?._id; const labelType = isMe && type === 'text' ? 'me' : author?.type; const label = getAuthorLabel(labelType, author?.name); return <span className="text-xs font-semibold mr-1">{label}</span>; }

Y por último, pero no menos importante, ¿necesitas estos accesorios? Quiero decir, el último mensaje seguiría siendo el último mensaje, con todos sus accesorios, incluido el tipo de mensaje, el tipo de autor, el nombre del autor, la identificación del autor, etc. Entonces, tal vez podría representar la etiqueta directamente en el elemento de párrafo, sin el hay que comprobar sus valores. Por supuesto, esto es irrelevante si necesita estos accesorios para otra cosa, o significan algo más por sí mismos.

Todo un refactor para el componente, como me imagino sería algo parecido a esto:

 const YourComponent = ({ lastMessage }) => { // your other logic goes here return <p>{renderAuthLabel(lastMessage)}</p>; }