How call React's setState function from outside of any component, like a utility function?

Question

I have an app where I want to move the read, write operations to a utility file i.e. away from component. I am trying to do it this way.

component.js

imp         


        

Answer 1

Replace the bind function with arrow function will allow it works like a callback.

saveData((newState) => this.setState(newState), data);

Answer 2

Need to bind this to setState.

 saveData(this.setState.bind(this), data);

Working codesandbox demo

Answer 3

It looks like you need to bind setState before passing it to an external function.

saveData(this.setState.bind(this), data);

Answer 4

This is not a good idea to extract methods that rely on the context (component instance) to utility functions, primarily because this requires to take additional actions to make them work.

Since this.setState is passed as a callback, it should be either bound to proper context:

saveData(this.setState.bind(this), data);

Or utility function should be defined as regular function and be called with proper context:

function saveData(data) {
    this.setState(data);
}

class App extends Component {
    saveContent() {
        saveData.call(this, data);
    }
    ...
}

This is the case where inheritance is preferable because it allows to get proper context naturally. saveData can be reused via a mixin.

It can be assigned directly to class prototype:

function saveData(data) {
    this.setState(data);
}

class App extends Component {
    // saveData = saveData
    // is less efficient but also a correct way to do this
    saveContent() {
        this.saveData(data);
    }
    ...
}
App.prototype.saveData = saveData;

Or be applied via a decorator:

function saveData(target) {
    return class extends target {
        saveData(data) {
            this.setState(data);
        }
    }
}


@saveData
class App extends Component {
    saveContent() {
        this.saveData(data);
    }
    ...
}