Material-ui: [Snackbar] Updating component view causes to show again

[mehrdad-shokri]

Snackbar component with open prop set to true is working as expected. but after the snackbar hides if the view is rerendered, (for example by writing in edittext) the snackbar is shown again.
Is there anyway to prevent this from happening?

[ghost]

Hmm..., set open prop to false (after the view is rerendered)?

[mehrdad-shokri]

Yeah, I've considered it, but you should do it in componentDidUpdate.
Updating state in that method causes componentDidUpdate to recall and it created a infinite loop of calling componentDidUpdate.

[lucasbento]

Can you paste a snippet of your component using snackbar?

[mehrdad-shokri]

my render method:

        render() {
            return (
                    <div>
                            <Snackbar
                                    open={this.state.showSnackbar}
                                    message="tag created"
                                    autoHideDuration={2000}
                            ></Snackbar>
                    </div>
            );
    }

my componentDidUpdate method:

if (this.props.createdTag & !this.state.showSnackbar) {
                    this.setState({showSnackbar: true});
                    setTimeout(()=> {
                            this.setState(
                                    {showSnackbar: false})
                    }, 2000);

            }

this.props.createdTag is came from redux reducer. When it's set to true I want to show a snackbar to the user informing him.
But the problem is when I start writing in an input the view is rerendered and snackbar is shown again.
I tried to use an internal state named showSnabkbar in a way that you see. I set it to true and use a timeout to set it to false after 2 sec.
But setting showSnackbar to true after 2sec causes to recall componentDidUpdate again, and an infinite loop is created.
I think there should be a timeout method to set internal state to false after a while, but I don't know how to achieve it.

[lucasbento]

@mehrdaad: <Snackbar /> hides itself after the value provided to the prop autoHideDuration.

Something like this works just like you want:

<Snackbar
  open={this.state.showSnackbar}
  message="Your message"
  autoHideDuration={2000}
  onRequestClose={() => this.setState({ showSnackbar: false })}
/>

componentDidUpdate() creates an infinity loop because the condition is not breaking.

[oliviertassinari]

Side note while I'm seeing this issue. For the next branch. I strongly think that we should break down the component. I would rather provide the state utility feature as _auto-hide_ and _transition message_ into separate HoC.

[lucasbento]

@oliviertassinari: can you give an example of how you imagine that?

[mehrdad-shokri]

@lucasbento yeah I know that it autohides, but when the view is rerender, like typing in a textview, it is shown again.

[oliviertassinari]

We could have the following modules:

• A stateless <Snackbar />.
• autoHide() HoC that implement the autoHideDuration property.
• transitionMessage() HoC that implement the transition when the message property change.

That would allow users to only get the behavior they want without paying for features they don't need.

[lucasbento]

@mehrdaad: that sounds more like a React-related problem, if you use state correctly the <Snackbar /> won't show up.

How and where are you defining showSnackbar as true?

[mehrdad-shokri]

I have provided the code above.
suppose I have set open to true. So it basically should show a snackbar and hide it after autoHideDuration. but after the snackbar is gone if the view is updated it is shown again.
And that is my problem.

[lucasbento]

@mehrdaad: did you try the code that I sent before? Supply a function to prop onRequestClose so it sets the state to false.

If you did and it did not work, please paste it here so I can take a look.

[mehrdad-shokri]

@lucasbento yeah I tried it, onRequestClose is executed when a pixed outside of snacbkbar is clicked.
But it's not called when snackbar closes after timeout.

my render method:

        render() {
            return (
                    <div>
                            <Snackbar
                                    open={this.state.showSnackbar}
                                    message="tag created"
                                    autoHideDuration={2000}
                            ></Snackbar>
                    </div>
            );
    }

my componentDidUpdate method:

if (this.props.createdTag & !this.state.showSnackbar) {
                    this.setState({showSnackbar: true});
                    setTimeout(()=> {
                            this.setState(
                                    {showSnackbar: false})
                    }, 2000);

            }

this.props.createdTag is came from redux reducer. When it's set to true I want to show a snackbar to the user informing him.
But the problem is when I start writing in an input the view is rerendered and snackbar is shown again.
I tried to use an internal state named showSnabkbar in a way that you see. I set it to true and use a timeout to set it to false after 2 sec.
But setting showSnackbar to true after 2sec causes to recall componentDidUpdate again, and an infinite loop is created.
I think there should be a timeout method to set internal state to false after a while, but I don't know how to achieve it.

[mehrdad-shokri]

@lucasbento tried onRequestClose again. seems like that was my fault it's working now.
I have a redux question here. right now I dispatch an action which resets redux state.
What would be your suggestion for this if I don't want to reset redux state?

[lucasbento]

@mehrdaad: cool, I'm closing this issue since this is resolved.

I can not answer since I don't have more info about what you are trying to do, also, Material UI issues should be kept as place to only discuss about Material UI-related stuff, such as bugs and feature requests.

I encourage you to try asking on stackoverflow.com which is a much better place for these kind of questions.