Comments (2)
Thanks for the details @AnandKumarJha and @KateDK. This question didn't say that "It is not safe to use setState() inside componentWillMount" but talks about not recommended to use in async initialization in componentWillMount(). That's why I mentioned componentDidMount instead of componentWillMount.
I updated the answer in the first sentence as "Yes, it is safe to use setState() in componentWillMount" to avoid confusion. Please let me know for any concerns.
from reactjs-interview-questions.
Few points:
-
Perhaps its a good idea to mention that this method will be deprecated eventually and is not recommended to be used?
-
Im not sure the current answer is wrong, but I think it answers the wrong question.
Using
setState
insidecomponentWillMount()
is fine:
"ThecomponentWillMount()
is a chance for us to handle configuration, update our state, and in general prepare for the first render. At this point,props
andinitial state
are defined. We can safely querythis.props
andthis.state
, knowing with certainty they are the current values. This means we can start performing calculations or processes based on the prop values."
taken from here.
"callingsetState()
synchronously incomponentWillMount()
method will not trigger an extra rendering"
taken from hereHowever: It is not recommended to use asynchronous actions inside
componentWillMount()
:
"These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering."
taken from hereanother great explanation:
"Well, when you do an async request in theconstructor
/componentWillMount
you do it before render gets called, by the time
the async operation has finished the render method most probably already finished and no point to set the "initial state" at this stage is it?.
I'm not sure this is your case here, but most of the cases that developers wants to initiate state asynchronously incomponentWillMount
is to avoid a second render call. but you can't avoid it can you, like mentioned above, render will fire anyway before the async operation will finish.
So, the best time to call an async operation is after a render has called and the component mounted (you could mount null or an empty<div/>
) and then fetch your data, set the state and make it re-render respectively."
taken from here.
In short, calling setState
is safe and OK from componentWillMount()
. However, it is not recommended to do subscriptions or asynchronous actions as those can cause additional rendering.
I think the current answer code should be updated to actually use componentWillMount()
(currently its componentDidMount()
) and in the code block display an example that does not use asynchronous actions- as those are not recommended.
I hope this was helpful.
from reactjs-interview-questions.
Related Issues (20)
- I have added detailed answer for Question 41 and created PR #243 HOT 1
- React is not present in import section in Question No. 8 HOT 2
- ReactJs interview questions
- Please provide more reasoning to Q12 HOT 2
- Class components confusion HOT 4
- React interview questions
- React
- fix: readme table of content 2nd point HOT 1
- Incorrect code sample for Q 335 HOT 1
- React js
- Table of Contents is too long maybe make it a collapsible section HOT 6
- React
- React interview questions
- Make a website for this github repo HOT 2
- React.js
- Pdna
- Use and advantages of bundlers in react application HOT 1
- React Interview Questions
- Question 81-86 relates to react router version 4. Can i update these questions and answers to new syntax in react router version 6? HOT 2
- React js interview questions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactjs-interview-questions.