My question is conceptual (just started picking up React).
Here's what I have:
Main Component (MC) mounts a Stateless Component (SC1). After a few dropdown selections and a "Continue" button click it mounts a SC2.
How do I run some queries right after the button click to display on SC2? (componentDidMount() doesn't seem to be available on a stateless component)
There has to be the "right way" to code this but I'm not sure what that is.
Btw. I am using React with Meteor and React Router. Thanks!
If you need to take advantage of component lifecycle methods like componentDidMount, which it sounds like you do for 'SC2', you have no choice but to write them as ES6 classes and not use functional stateless components.
Related
I am new to React and learning it. From this link:
There are mainly two components in React:
Functional Components also known as Stateless component
Class Component also known as Stateful component
and it seems that functional components are the rage these days e.g., I inherited some code and it uses functional components everywhere. The same article is then saying:
... a functional component is just a plain JavaScript function, we
cannot use setState() method inside component. That’s why they also
get called functional stateless components. ... useState can be used
to store state in a functional component.
and I do see tons of code using useState in functional components to modify state. Can someone explain this to me?
Answering my own question.
Functional components were referred to as stateless components but its no longer correct to think of them as stateless. This link from official documentation explains it:
You might have previously known these as “stateless components”. We’re
now introducing the ability to use React state from these, so we
prefer the name “function components”.
To answer the second part of the question, functional components are indeed the rage these days because that's the official guidance and recommendation. From this page:
In the longer term, we expect Hooks to be the primary way people write
React components.
Also see this page for some background and comparison of class components vs. functional components.
I'm maintaining React app and I have to turn all class components into functional.
One component has the renderChildren() method.
Is there a way to mimic that method in a functional component with hooks?
I really appreciate the support.
I did not understand, which best practices of react component. That's functional base or class base. Please suggestion to me!
You need to dig down more to get the exact knowledge of both the Components as both of them are equally important. Class based components are state based components means you can change the state (data accordingly) but in functional component you cannot do this and whatever is coming in props value you can just show that thus it is called stateless component.You should use functional components if you are writing a presentational component which doesn’t have its own state or needs to access a lifecycle hook. Otherwise you can stick to class components or take a look into the library recompose which allows you to write functional components and enhance them with a state or lifecycle hooks with HOCs!
For more:
https://medium.com/#Zwenza/functional-vs-class-components-in-react-231e3fbd7108
https://programmingwithmosh.com/react/react-functional-components/
For simple stuff you may want to use Functional components,
but if you want to use state and life cycle methods (component did mount, component did update, component will unmount..) you may want to use Class based components.
Although I recommend you use react hooks, because with them you can write Functional based components with state and life cycle methods - for MUCH cleaner code.
Hope this helps
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.
I'm kind of new to react, right now i'm making app on react native that will have a single instance of a timer, this timer should be able to be controlled (start, pause, stop, restart) from different components, but i find a bit tedious to pass this instance as a prop to every child component. Is there a better/cleaner way to do this ?
You should properly learn to use redux or any other flux implementation.