Encontré una discusión similar a mi pregunta aquí, pero quería profundizar más.

Todavía tengo que encontrar cualquier documentación de React que discuta si las variables estáticas (que no cambian pero deben usarse para una vista de React) deben almacenarse como una variable de estado o reconstruirse cada vez que se vuelve a representar el componente.

Digamos que tengo un componente React que admite un accesorio, que es una lista, y quiero asignar esta lista a una determinada salida. En mi caso de uso, estoy convirtiendo la lista en el formato de las opciones que usará el selector de selección de mi componente. Una vez hecha esta lista, no es necesario cambiarla. Todas las opciones seguirán siendo las mismas durante el resto del uso del componente.

Se siente extraño ponerlo en estado, aunque parece más eficiente. Vayamos a través de dos enfoques.

Enfoque n.º 1: almacenar la lista de opciones en el estado del componente.

 class Component extends React.Component { constructor(props) { this.state = { options: props.list.map(some => computation) } } render() { return ( <SelectPicker options={this.state.options} /> ) } }

Enfoque #2: Vuelva a crear la variable en cada renderizado.

 class Component extends React.Component { constructor(props) { ... } render() { const options = this.props.list.map(some => computation) return ( <SelectPicker options={options} /> ) } }

Lo último parece más correcto, ya que dado que la matriz de opciones nunca debe cambiar, solo debe inicializarse una vez, y no tiene sentido ponerle un observador por ser parte de state . El primero parece más eficiente, ya que solo calculamos este valor una vez, en lugar de volver a calcularlo cada vez que se vuelve a renderizar el componente. Sí, React comparará el estado entre renderizaciones, pero ¿no comparará las referencias de la lista de options ? ¿Mientras que el último ejemplo reconstruirá completamente una nueva lista? Tbh, ninguno de estos parece ser el enfoque "limpio" de esto.