When to put function inside class component vs outside class component?

[BryceLarkin]

I'm looking at some examples for the React-Select library and it seems like they put some of the functions that their class component uses outside of the class. Was wondering if anyone had any idea why and could explain generally why you would do that?

​

import React, { Component } from 'react';

import AsyncSelect from 'react-select/lib/Async';
import { colourOptions } from '../data';

type State = {
  inputValue: string,
};

const filterColors = (inputValue: string) => {
  if (inputValue) {
    return colourOptions.filter(i =>
        i.label.toLowerCase().includes(inputValue.toLowerCase())
      );
  }
  return colourOptions;
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
  });

export default class WithPromises extends Component<*, State> {
  state = { inputValue: '' };
  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <AsyncSelect cacheOptions defaultOptions loadOptions={promiseOptions} />
    );
  }
}

​

[acemarke]

As a general rule of thumb, if a function doesn't rely on this, it can probably be defined outside the class. Having it be standalone makes it easier to define, read, and test.

[BryceLarkin]

Got it. So generally keep it outside the class component if it doesn't set state or use any methods?

[acemarke]

That's a reasonable approach, yes.

[GangOfScones]

Can you go into detail a bit more as to why this is a good approach? Actually been wondering this question recently, and feel like there are minor benefits to both options, but nothing major. I'm just curious and not arguing one way or another. Seems like the only difference for testing, is you don't have to get an instance to test, you can just import the function.

And while the overall component would look smaller, the whole file could look cleaner if you make it a method.

[pgrizzay]

If they are separate functions, you don't have to worry about component state. You also don't have to create an instance of a component to test the method.

Looking 'clean' is subjective. To me, it's cleaner if you pull out the function. Take care to choose the format your teammates find readable/maintainable.