score:3
Accepted answer
If I'm reading you correctly, it sounds like you have your Snackbar working properly, but it closes too quickly. You'd like it to show but then auto-close itself 4 seconds later, even if the API call itself only took .5 seconds for example. Is that correct? If so, I believe you can simply skip re-rendering your component when the state.open
is being changed from true to false (but still allow render when going from false to true):
shouldComponentUpdate(nextProps, nextState) {
// Only re-render when snackbar is going from closed to open
return !this.state.open && nextState.open;
}
Source: stackoverflow.com
Related Query
- Showing Snackbar with React Redux
- React showing 0 instead of nothing with short-circuit (&&) conditional component
- React still showing errors after catching with ErrorBoundary
- Nested components testing with Enzyme inside of React & Redux
- Prevent react component from rendering twice when using redux with componentWillMount
- Jest "No tests found, exiting with code 1" error on Windows 10 in React Redux application
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Dealing with local state in react and redux
- Create React App not showing error message with ErrorBoundary
- Fractal Project Structure with React and Redux - pros/cons
- React router v4 not working with Redux
- Async data flow in React App with Redux + ReactRouter?
- Calling an action from a different reducer with React and redux
- Using React forwardRef with Redux connect
- How do I use local state along with redux store state in the same react component?
- VueJs 2 with Vuex vs React with Redux
- Where to store WebRTC streams when building React app with redux
- React Redux use HOC with connected component
- Redux in React Native app is very slow with lots of data
- Performance issues with a tree structure and shouldComponentUpdate in React / Redux
- Using react redux with next.js
- Dynamically load redux reducers with react router 4
- Paginate date-specific results from an API with React and Redux
- Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI
- Using ES6 Map with React and/or Redux
- React + Redux with a rest api?
- how to cancel previous axios with redux in react
- react props not updating with redux store
- Typing redux forms v7 with TypeScript and React
- Multiple Registration Form with redux and react
More Query from same tag
- How to use react conditional rendering?
- React Passing Data to Stateful Component from Another Component
- Delayed onBlur callback
- React localStorage - Browser Console
- how to set value in hooks
- React and TypeScript - how to import Less
- javascript promise handling, fail to handle error
- React Conetxt with useReducer + Typescript - 'No overload matches this call'
- Howto add pagination with axios get request in Reactjs
- React: Hook gives an error in the body of function component
- Reactjs Source map
- React - Check if a value already exists in an array?
- react material along with react infinite scroll component table body
- 'next' is not recognized as an internal or external command, operable program or batch file on Reactjs
- How can I use Css Modules to concatenate a class with a variable
- React Native Debugger Error - Cannot GET /debugger-ui/
- Props undefined using redux
- How to partially update local state value?
- Rendering while cycling through object isn't working
- Rendering part of a React function component after async call gets completed
- Can a React app return an image string that can be read into the SRC attribute of a <img> tag?
- How to access custom html attributes with jQuery?
- Unauthorized page restriction wants a refresh
- Effect to selected link gastby styled-component
- How to apply CSS styles to content rendered after AJAX call
- React hooks useState not updating with onChange
- How to set Material-UI breakpoint for small, medium, and large screen with `useMediaQuery`
- React - onClick event not working correctly
- Time picker set up in React - jquery-timepicker
- Cannot use import statement outside a module error in React JS + JEST + Antd