Best place/way to declare static data in React

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;