Is it wrong to use setState in a function outside of the React ponent?

Example:

// myFunction.js
function myFunction() {
  ...
  this.setState({ ... })
}

// App.js
import myFunction from './myFunction

class App extends Component {
  constructor() {
    super()
    this.myFunction = myFunction.bind(this)
  }

  ...
}

Is it wrong to use setState in a function outside of the React ponent?

Example:

// myFunction.js
function myFunction() {
  ...
  this.setState({ ... })
}

// App.js
import myFunction from './myFunction

class App extends Component {
  constructor() {
    super()
    this.myFunction = myFunction.bind(this)
  }

  ...
}

• javascript
• reactjs
• react-native
• ecmascript-6

• 1 It is not wrong. You're essentially creating a mixin function. – Roy J Commented Apr 29, 2018 at 19:52
• @corasan does code in this way actually run for you? – Colin Ricardo Commented Apr 29, 2018 at 19:54
• @Colin yeah it does, works perfectly – corasan Commented Apr 29, 2018 at 20:06

4 Answers 4

I'm not sure the way you're binding will actually work. You could do something like:

export const getName = (klass) => {
  klass.setState({ name: 'Colin'})
}

then

class App extends Component {
  state = {
    name: 'React'
  };

  handleClick = () => {
    getName(this);
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick}>change name</button>
      </div>
    );
  }
}

Working example here.

So the only reasons to do this is if you are reducing repeated code, e.g. two ponents use the same logic before calling this.setState, or if you want to make testing easier by having a separate pure function to test. For this reason I remend not calling this.setState in your outside function, but rather returning the object you need so it can you can call this.setState on it.

function calculateSomeState(data) {
  // ...
  return { updated: data };
}

class MyComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = calculateSomeState(props.data);
    }

    handleChange = (e) => {
        const value = e.target.value;
        this.setState(calculateSomeState({ ...props.data, value }));
    }
}

It looks like a bug waiting to happen... If you want to use an external function to set state, you can use the alternative syntax provided by React:

this.setState((prevState, props)  => {
  return updatedState; //can be a partial state, like in the regular setState
});

That callback can easily be extracted to an external function and it's guaranteed to work

It is not wrong, the function is never called outside the ponent. This is a mix-in technique. bind isn't needed, as long as the function isn't used as a callback. In this case myFunction is same among all instances, a more efficient way would be:

class App extends Component {}
App.prototype.myFunction = myFunction;