reactjs


function return true after setTimeout (shouldComponentUpdate)


I want a function to return true after a Timeout. Can this be done?
I want to use that in reacts shouldComponentUpdate() Method. When returned true the Component will be rendered. I want it to be rendered after a Timeout.
what i have found so far is this, but it does not work as expected:
shouldComponentUpdate(nextProps, nextState) {
var promise = new Promise(function(resolve, reject) {
window.setTimeout(function() {
resolve(true);
}, 3000);
});
return promise;
}
shouldComponentUpdate() should return true after 3 seconds.
shouldComponentUpdate must return a boolean immediately. It should be synchronous and fast.
Usually if you want to have some real DOM manipulations like an animation, you can do that in componentDidUpdate().
But it seems that you want the animation before the re-render. If your component is depending on props purely, The easiest way is to put the animation code in componentWillReceiveProps(), and simply return false in shouldComponentUpdate(). After the animation you call a this.forceUpdate() to force re-render.
Another way I can imagine is to wrap your component with another component. When you have an update then parent will hold the changes for 3 secs and do the animation. After that, the parent pass down the new props to the child.
(For the solution 1, use shouldComponentUpdate instead of componentWillReceiveProps will also work, but componentWillReceiveProps looks better to me)

Related Links

Diagnostics feature in Angular 2 vs React
React- Elegantly Toggle State Visibility
React Single Page app with browserHistory possible?
Assign reducer to nested state property?
ReactJS rendering issue
How to setup a globally available react variable (also available in the browser console)?
Move the logic into new action
Understanding React Error Output
redux thunk calling two different api requests
“Define is not defined” in Jest when testing es6 module with RequireJS dependency
Golang single page website server [duplicate]
Redux Action data needed for another Action
redux check state at componentWillMount
Upload PDF to Firebase Storage - Uncaught Error: This browser doesn't seem to support creating Blobs
How can I check condition in reactjsx?
React - Handle event in parent component

Categories

HOME
logging
indexing
teradata
qemu
conceptual
assign
opengl-es
sugarcrm
opacity
software-collections
eclipse-orion
openstack-horizon
loss
ringcentral
ibatis
beacon
summernote
vala
combinations
aspxgridview
waterfall
aws-certificate-manager
suitescript
ballerinalang
drombler-fx
sphinx4
spring-data-gemfire
recreate
r-factor
selenium3
luhn
eclipse-jdt
sampling
cache-control
flex3
campaign-monitor
outlook-2010
console.readline
kepserverex
rbac
google-cloud-powershell
definition
irr
test-kitchen
datagridviewcombobox
android-doze-and-standby
reqif
automapper-4
react.rb
noise
openidm
fluent-nhibernate-mapping
playframework-1.x
node-java
aws-rds
activesupport
xamarin-test-cloud
toggleclass
treelist
bbedit
kramdown
bioconductor
musicbrainz
joomla3.3
borland-c++
firebase-tools
jad
chunks
kss
diffmerge
amzi-prolog
angular-file-upload
isl
episerver-7
azure-caching
internet-radio
html5-filesystem
mixradio
node-amqp
google-voice
dylan
kendo-window
nsnumber
oc4j
dd4t
qmainwindow
openafs
webpage-screenshot
aspmenu-control
nserror
win-prolog
pex-and-moles
gmagick
sessiontracking
zipstream
lwp
quazip
arraycollection
browser-state
mysql-logic
qprocess
data-formats
manuals
office-2003

Resources

Encrypt Message