What is a possible Javascript convention/pattern to avoid unnecessary namespace pollution with React classes/components

Question

This seems like quite a silly question but to this point I haven't been able to find a clear answer.

I'm looking for essentially a best practice to storing variables and helper functions in JavaScript. I need to keep this list updated locally, so my first instinct is to store it outside the react class globally, but clearly this is a bad idea as I will eventually need to add helper functions and more variables to be used in my component.

import React, { Component } from 'react';
import Select from 'react-select';


const list = ['1', '2', '3'] // is it acceptable to store this here?


export class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="well">
                <div className="row">
                    <div className="col-sm-4">
                        <h3>Device Type</h3>
                        <Select options={list}/>
                    </div>
                </div>
            </div>
        )
    }
}

I've read about many different design patterns (module, singleton, revealing, etc...) in Javascript to avoid polluting the global namespace, but I'm not sure what my best option is.

So again, my question is, what's the best practice for storing variables and helper functions that need to be used by my react component/class without just throwing everything into the global namespace.

EDIT

Obviously this is a very broad question and I'm assuming I'll receive some grief for asking it. If there's a better way to ask it please let me know. A link to some other resource that answers the question would also be very helpful.

Someone in the comments mentioned that using ES6 modules already handles the global pollution problems that existed in Javascript before. Is it ultimately okay for me to store helper functions and variables outside my class without any repercussions?

I'd appreciate suggestions on how I can make this question more concise if you're going to downvote. — 23k
– 23k, Commented Dec 29, 2017 at 15:29
You're using ES6 modules, so already you don't have the same problems with polluting your namespace that you had with traditional JS — SpoonMeiser
– SpoonMeiser, Commented Dec 29, 2017 at 15:32
@SpoonMeiser So keeping helper functions and variables outside the class is an acceptable solution? — 23k
– 23k, Commented Dec 29, 2017 at 15:33
If they are used only by one class, they can be local variables. Otherwise they are imported from other modules. — Estus Flask
– Estus Flask, Commented Dec 29, 2017 at 16:12
@23k yes, anything you declare in your module (and don't export) will only pollute the namespace of that module. Someone should fashion this into an actual answer, but basically I'm saying you don't actually have the problem you think you have. — SpoonMeiser
– SpoonMeiser, Commented Dec 29, 2017 at 16:16

utalking2me · Accepted Answer · 2017-12-29 15:35:23Z

What I usually see in the projects that I work on is:

Look at this as a folders structure:

components
- Example
  - index.js
  - helper.js (you can use other names, like functions, constants etc)
utils
- functions.js
- constants.js

so inside helper you would have those constants and functions that only the example component (index) will use.

inside utils you should add functions and constants that different components and containers will access.

index.js

import React, { Component } from 'react';
import Select from 'react-select';
import { list, parseName } from './helper'

export class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="well">
                <div className="row">
                    <div className="col-sm-4">
                        <h3>Device Type</h3>
                        <Select options={list}/>
                    </div>
                </div>
            </div>
        )
    }
}

helper.js

export const list = ['1', '2', '3'];
expor const parseName = (name) => `Sr ${name}`;

I added a parseName so that you can have an idea of what you could add inside helper.js, which should be mainly pure functions

Collectives™ on Stack Overflow

What is a possible Javascript convention/pattern to avoid unnecessary namespace pollution with React classes/components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related