TL;DR
To be a component ≠ Return JSX
<Component /> ≠ Component()
Note: This article tries to explain a somewhat advanced concept.
One of...
For further actions, you may consider blocking this person and/or reporting abuse
Another alternative i found is the following:
Why using useState in a function is valid.
eg.
When the state changes and re-renders, the aa function is indeed the latest value
usestate hook are used by react to memorize something .. in order to work that hook should be called by react itself ..not you .. so when react calls it.. it will get an object with the info of current component and react will go find where the shelf is and get the memorized value
AMAZING! I met exactly the same bug yesterday, and fixed it by accident changing
<Component />
to{Component()}
, then found this article this morning. Thanks for your article and help me to understand.Glad it helped 👍
What if the text component contains it's own state as well? As you said in case of function call react doesn't know about the existence of text function? What will happen to the state?
const HelloWorld = () => {
const text = () => {
const [value, setValue] = useState('hello')
return 'Hello, World';
}
return (
<h2>{text()}</h2>
);
}
Certainly the state will not work in any meaningful way
Deep and eye-opening article! Thanks.
P.S. This article indirectly helped me figure out my problem with HOC: I needed to wrapped multiple components inside a HOC and render the result. and all of these are inside another component's return.
After reading this, I realized HOC is a function that get another function declaration as argument. So I needed to do something like this to get the results:
Nice article! Thanks for the deep dive.
Amazing article. Thanks
One of the best article I have read on React.
Hey, so glad you liked it :)
I came accross similar bug but after reading your articles, i totally understood why its happening . GOOD WORK BUDDY.
Thank you :)