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.
Related
Every where I see are the advantages of hooks over class component , but still class components in react do exist so can anyone tell me the advantages of class components over hooks?
Can we build whole react app using functional component or class based components are compulsory for building stateful components?
You can use functional components to build the whole app too!
With the help of React Hooks, state management has been made possible with functional components too and for any new projects, its a recommended way to go.
Since React 16.8, they've introduced react hooks. So now you can build your whole application with functional components using props based approach and with hooks you can have everything that a class based component provides.
So it's your decision with which you need to go. But if you consider testing with 100% factor then functional components with hooks are the best option to opt.
I came to realised that hooks on functional components could do what class component could do without the class component lifecycle.
Is there any example where we need to and have to use a class component instead of a functional component?
Thanks
ErrorBoundaries can only be implemented with class components.
As per the hooks FAQ
There are no Hook equivalents to the uncommon
getSnapshotBeforeUpdate, getDerivedStateFromError and
componentDidCatch lifecycles yet.
In order to use the above lifecycles you would need to use class components
Apart from this all other useCases can be implemented with functional components with hooks
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
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.