Se me ocurrió una solución funcional para esto, pero no me parece bien. Solo eche un vistazo por favor y hágamelo saber. ¿Es aceptable usarlo así?

El ejemplo está muy simplificado, necesitaba proporcionar un montón de accesorios para cada componente, es por eso que puse la función de clasificación dentro del principal. Básicamente, cada componente ordenado es una parte de la forma grande.

 import React from "react"; import "./styles.css"; function ComponentOne() { return <div>One</div>; } function ComponentTwo() { return <div>Two</div>; } function ComponentThree() { return <div>Three</div>; } function ComponentFour() { return <div>Four</div>; } export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {(() => { const components = [ { order: 4, component: <ComponentOne /> }, { order: 3, component: <ComponentTwo /> }, { order: 2, component: <ComponentThree /> }, { order: 1, component: <ComponentFour /> } ]; return components .sort((a, b) => a.order - b.order) .map((item) => ( <React.Fragment key={item.order}>{item.component}</React.Fragment> )); })()} </div> ); }

Aquí hay un entorno limitado para esto: https://codesandbox.io/s/confident-leavitt-etwyo1?file=/src/App.js