How to avoid using setState with callback

Question

I have the following react component (it works), but I am using a cb for setState.

I would like to know how to refactory the code removing the cb from the code: this.setState({ viewer: null, document: null }, () => this.getViewer(type, item))

export class DocumentComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      document: null,
      viewer: null,
    }
  }

  getViewer(type, item) {
    let node = null
    switch (type) {
      case 'image':
        node = (
          <Imager url={item.src} />
        )
        this.setState({ viewer: node, document: item })
        break
      default:
        this.setState({ viewer: null, document: null })
        return null
    }
  }

  openViewer(type, item) {
    this.setState({ viewer: null, document: null }, () => this.getViewer(type, item))
  }

  handlerOnClick(item: Object) {
    this.openViewer('image', item)
  }

  render() {
    const { tileData, classes } = this.props
    return (
      <div className={classes.root}>
        <Thumbnailss tileData={tileData} handlerOnClick={item => this.handlerOnClick(item)} />
        {this.state.viewer}
      </div>
    )
  }
}

export default DocumentComponent

Why do you even call this.setState({ viewer: null, document: null }, ...)? Why not just execute this.getViewer(type, item) directly instead? — Felix Kling
– Felix Kling, Commented Nov 1, 2017 at 19:08
I am using this.setState({ viewer: null, document: null } to remove the component rendered at {this.state.viewer} if you know a better approch please let me know — GibboK
– GibboK, Commented Nov 1, 2017 at 19:12
But this.getViewer is already doing that as well. It either creates a new component or sets the state to null. I don't see why a previous call to set everything to null is necessary. — Felix Kling
– Felix Kling, Commented Nov 1, 2017 at 19:18

Abdennour TOUMI · Accepted Answer · 2017-11-01 19:21:13Z

3

I assume/ you assume you are using babel and ES7. If so, you can use async instead.

using cb

openViewer(type, item) {
   this.setState({ viewer: null, document: null }, () => this.getViewer(type, item)) 
}

using async-await

async openViewer(type, item) {
   await this.setState({ viewer: null, document: null });
   this.getViewer(type, item)
}

We were tested this approach and it works fine in our environments.

using promises

Or if you are comfortable with promises .

export class DocumentComponent extends React.Component {
   // override and extend setState 

   setState(state) {

     return new Promise((resolve) => {
        super.setState(state, resolve);
     });
   }
   //...
   //...

   openViewer(type, item) {
     this.setState({ viewer: null, document: null })
       .then(() => this.getViewer(type, item))
   }
}

edited Nov 1, 2017 at 19:21

answered Nov 1, 2017 at 19:12

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

ES7 is ES2016, not ES2017 (which introduced async/await). (Before ES2016 was published, "ES7" referred to experimental features, but some of these features are not experimental anymore).

Abdennour TOUMI Over a year ago

@FelixKling Thanks for the info , I Updated the answer with 3rd alternative using promises.

Mayank Shukla · Accepted Answer · 2017-11-01 19:20:16Z

3

Why not this way?

Instead of storing UI elements in state, store the data that you want to use, like src and type in your case. Call getViewer method from render it will return the proper ui items. By this way you don't need to worry about setState callback, whenever you update the value of type and src, react will update the ui automatically.

export class DocumentComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      src: '',
      type: '',
    }
  }

  getViewer() {
    switch (this.state.type) {
      case 'image': return <Imager url={this.state.src} />
      default: return null
    }
  }

  handlerOnClick(item: Object) {
    this.setState({
      type: 'image',
      src: item.src
    })
  }

  render() {
    const { tileData, classes } = this.props
    return (
      <div className={classes.root}>
        <Thumbnailss tileData={tileData} handlerOnClick={item => this.handlerOnClick(item)} />
        {this.getViewer()}
      </div>
    )
  }
}

export default DocumentComponent

answered Nov 1, 2017 at 19:20

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

6 Comments

GibboK Over a year ago

tried but I still get the same issue, the component is not being updated

Mayank Shukla Over a year ago

can you show the full code that you are trying on pastebin or somewhere? because this should work. also debug the code by console, put a console.log('item', item) inside handlerOnClick function and check what value you get on onClick.

GibboK Over a year ago

I really like your approach, I hope you can give me an hit on how to fix it, thanks

Mayank Shukla Over a year ago

i have doubt on this part handlerOnClick={item => this.handlerOnClick(item)} i think this item should be event object, make sure item have the src, do console.log(item) and please check its value inside handlerOnClick method.

GibboK Over a year ago

yes I double check it, the state is actually updated properly when getViewer run. this.setState is asynch, could be the reason why it does not work?

|

ruanmer · Accepted Answer · 2017-11-01 19:15:29Z

0

Try this:

setViewer(type, item) {
  switch (type) {
    case 'image':
      const node = (
        <Imager url={item.src} />
      );
      this.setState({ viewer: node, document: item });
      break;
    default:
      this.setState({ viewer: null, document: null });
  }
}

openViewer(type, item) {
  this.setViewer(type, item);
}

answered Nov 1, 2017 at 19:15

ruanmer

315 bronze badges

Collectives™ on Stack Overflow

How to avoid using setState with callback

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related