I'm new in ReactJS and I'm wondering what is the point of using stateless component(aka functional component) when we can use class base component even if we don't have state in our component? Is this just a convention? Or this is about our app speed!
Because, I always forget to remove render() method from my component when I'm trying to use functional component. Thank you.
Related
Why we cannot use hooks inside react class component ?. React Official documentation only say that hooks don't work inside class, But doesn't show why it won't work.
Class based components are components that extend the React.Component class.
Because of this, they have access to predetermined methods and have a specific lifecycle. For example, the render() method must be defined for class based components. More about the features of the component can be found here.
Historically, we couldn't use lifecycle methods in functional components or access state.
However, hooks were specifically introduced in React to provide this functionality to functional components. Meaning, hooks were only written for functional components when they were added.
Given the fundamental differences in the way React deals with functional components vs class based components and their different lifecycles- I suspect it wasn't feasible to try make hooks components compatible with class based components - especially as they already have access to state and their own lifecycle methods.
Moreover, given that a class component has specific methods, allowing both their existing methods and hooks would naturally lead to rendering chaos.
More can be found here on functional component lifecycle equivalents for class components.
This answer has more information on the fundamental differences and limitations of functional components vs class components - which will help elucidate why it's simple not possible to use their respective functionality in one another
When do we should use hooks over HOCs, and HOCs over hooks in React?
For example, I can perfectly have a hook for managing auth state, and then use it in a component... but I can also have a HOC which manages the auth state and wrap components for using its logic.
So... is there any rule to know if what interests you is to implement a HOC or a hook?
Why use HOC?
HOC is useful when you want to inject additional behaviors into the existing Component. You can use HOC to inject:
React Lifecycle (eg. execute code in componentWillMount)
State
(eg. react-redux’s connect) 3
Component (Parent Component, Child
Component, Sibling Component) Style
Why React Hook?
If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.
When I was learning react my instructor always remind me that I should use functional component as many as possible, try to avoid using class component, use class component sparingly. Yeah it was easy back then.
Now I am using Redux and I can barely using functional component because connect() imported from react-redux will only work with class component, as a result every component of my app are all class component. Is this normal? Since nowadays hooks API (which is using functional component) increasing in popularity.
Well, 2 things:
Firstly, it is possible to connect a functional component.
Secondly, you shouldn't be connecting every component to Redux. In reality the less components connected to Redux the better. Ideally, for a set of components, you have a 'container' component which is connected to the store (and which contains all the other relevant state and logic within it), then it passes that stuff down to the functional/class component children (which are more focused on presentation). Then you can have a few of these containers throughout the app, and the rest of the components are just traditional React ones.
If you connect everything directly to the store it can lead to problems like decreased reusability of components, poor performance or encouragement of bad component layout/hierarchy.
In react we can use 3 different way to create a component.
1.const App =()=>{...}
const App = React.createClass({...})
3.class App extends React.Component{...}
Which the best solution to define a component?
It depends on the use-case and preference.
See https://reactjs.org/docs/components-and-props.html#functional-and-class-components for why you would like 1 over 3 or otherwise.
It Depends on what you'r going to do with your component.
If you want states in your components then use class App extends React.Component{...}
If you want stateless components means just work with some props and return some JSX than use const App =()=>{...}
Using stateless components is consider as good practise.
I cam across the definition of a component in the code base I'm working upon:
#PureRender
export default class UiWidget extends Component {
}
I tried googling to understand the significance of the attribute #PureRender which has been used to decorate the component but didn't get any relevant link. Can someone help me understand the impact of applying this attribute on a reactJs component?
There are three ways to define a react component:
Functional stateless component which doesn't extend any class
A component that extends PureComponent class
A normal component that extends Component class
For simple, presentation-only components that need to be easily reused, stateless functional components are preferred.
PureComponent overrides the shouldComponentUpdate for you and re-renders the component only if the props or state have actually changed. The important point here is it only does a shallow comparison of nextProps and nextState. You can read more here and here. #PureRender is simply the declarative way of saying that my reactJs component inherits from predefined PureComponent reactJs component.
Extending Component class helps to implement your own shouldComponentUpdate if you need some performance gains by performing you custom comparison logic between next/current props and state.
This is a javascript decorator, originally proposed in ES2016 (ES7). I believe they were removed from the proposal and postponed.
The purpose of the decorator is to add shouldComponentUpdate implementation with shallow property comparison.
Nowadays the same is done using extension from PureComponent:
export default class UiWidget extends React.PureComponent
I believe the decorator is not part of React, therefore it is probably implemented somewhere in your project, or in a dependency, similar to
pure-render-decorator.
Historically, React implemented that using pure-render-mixin, however mixins couldn't be used with ES6 classes (only with React.createClass) therefore alternative solutions were introduced. Decorators were one of them.