Best place/way to declare static data in React - reactjs

Question

I am reading through the internet trying to find some performance resolute or preferred method of declaring static data, variables in react so I would like to hear your opinion.
This goes for react stateless and class components.
Let’s say I have an array with colors that I want to use somewhere inside React return().
const colors = ["red, "green", "blue"];
1) Declare it inside of render()
I suppose this is not preferred, snce it will be recreated on every render.
2) Declare it in constructor as a global variable
this.colors = ["red, "green", "blue"];
Nice, but maybe not preferred in some cases to have global variables.
3) Declare it as a return of function placed inside React component but outside of render(). We call the function from React return()
4) I think I saw somewhere using defaultProps.
Is there a best practice?

Answer 1

Few common approaches are to
declare it above a class or in beginning of a file after imports
if its a file specific constants.
const CONST1 = [0,1,2,];
class xxx extends yy {
....
}
or you can keep it in seperate file and import it when its common to many places.
something like
a json file
file a.json
{
"color": "red"
}
usage b.js
import constant from 'constants/a.json';
console.log(constant.color);
or even in global.color = 'red' which i would not advice to use

Answer 2

For class components, I've used the approach of declaring static variables on the class recently.
import React from 'react';
class Example extends React.Component {
// never changes, but may be used in other places, such as parent components
static displayName = 'Example';
state = {
someStateData: 'World'
};
render() {
const { someStateData } = this.state;
// do work
return <p>Hello {someStateData}</p>;
}
}
export default Example;

Answer 3

Well, I think it depends on your needs, most cases 2 and 3 might be enough. I've seen several proyect sources (such as create-react-app, react-native-maps, for instance) and they all handle this consts and "Global resources" in a same way:
They put them in separated files, and they import them as modules in every file where they are needed. I've used this approach and I can tell you is a really good and common practice

Answer 4

I want to bring up this because it's a really good thing:
https://www.npmjs.com/package/reactn
ReactN is a extension of React that includes global state management. It treats global state as if it were built into React itself -- without the boilerplate of third party libraries.
You can use [ global, setGlobal ] = useGlobal() to access the entire global state object.
It works in class, function, and non-react files.
I use it since 2 or 3 years ago, without a glitch.
I know that, given the OP's question, this is overkill. But anyway, I wanted to draw attention into this excellent tool.