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
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.
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
Is there any guideline for what component should be a container component connected with a redux store and what component should not be?
Probably, I should ask what kind of state needs to be an application-level state and what kind of state needs to be an component-level state.
I don't have any guideline for this yet personally, but I think these states are the candidate for an application-level state.
a state which is shared by multiple components.
hmm... that's it, isn't it?
So, back to my original question, any components that have a state shared by multiple components are the good candidate for a container component connected with a redux store?
Your components should ideally just render a UI based on props. So start with a functional component. If you need lifecycle hooks, you will, of course, need a class, but try not to do this with state.
To populate the props of your component, you need a container. This is a blackbox component which takes data and marshals into the props of your component. It can get data from redux, your API, graphql, or even using HOC's from recompose.
React is designed around immutability, so it seems a little odd to me that it depends to fundamentally on two mutable properties of the Component. If they'd implemented it as render(props, state), it would reduce temptation to modify state in other functions, and fit more cleanly into the notion that render is a purely functional operation.
I feel like if I understood the design decision I'd be able to use React more effectively.
props and state are to be treated as immutable. props are read-only and any updates to component state should be done using setState to avoid your changes being overwritten.
The render method doesn't have to have the notion of being a pure function where a persistent/changing state needs to be handled.
Abstracting your components into stateful and stateless (functional) components is something you can look into if you are looking to make your React components presentational/dumb/pure.
You could build your application building purely functional components but either:
you'd have to find a way to manage state changes to pass onto your functional components
your application is so simple as to have no state or no state that changes with complex logic.