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.
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
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.
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.
I've been reading up on the new context API and have a question regarding using it alongside HOC to inject props instead of directly wrapping every child that needs access to some state with a Consumer.
Isn't the above achievable without context? Isn't it possible to just house some state in a HOC and inject that into wrapped components that need access?
It is possible but each wrapped component will have it's own data passed from HOC. While using context, this data is shared between components.
So changing data in a context will make all Consumers re-render, while HOC will work only for the wrapped component.
The documentation explains the use case where a lot of components need to access the common theme, and hence can be wrapped with an HOC. without the context, you can make use of HOCs state to store the variable and pass on to the components wrapped with HOC but all of these components will have a different instance of the state and won't react to the theme change together.
Context makes it possible to store the data centrally and all listeners/consumers will react to the change together.
I have a react component which i am injecting a mobx store. when I try to access an observable from my store inside a lifecycle method (componentWillMount or componentDidMOunt) the value is empty. however when I access it inside the render method it is available. Is there something I am missing? I feel like I'm missing something basic here.
The documentation clearly states that observer from mobx-react tracks observables only in render method of wrapped component.
Function (and decorator) that converts a React component definition,
React component class or stand-alone render function into a reactive
component, which tracks which observables are used by render and
automatically re-renders the component when one of these values
changes.
If you take a look at observer sources you can confirm that it only tracks render method
Hi by my experience with Mobx state management you should not access the
observalbe variables from React Component.
Even when you inject the Redux Store into React Component. (Decorate or wrap).
The computed variables are designed to provide updated observable variables to React Component.
You can access Mobx actions and computed but not the observable. They are used only inside Mobx class.