Is it possible to use both Functional and Class Components in a single React App?. I am building a website UI with React, back end has been build with NodeJS. The templates I am using was build with Class Components where they new Components I am introducing are Functional with Context API's. Can they work together or is it necessary I convert all the Class Components to Functions?.
Yes, you can use both in the same app. They are 100% compatible.
Each one can pass props to the other
They will be both compiled into plain javascript.
Quote from reactjs.org :
In React apps, whether a component is stateful or stateless is
considered an implementation detail of the component that may change
over time. You can use stateless components inside stateful
components, and vice versa.
Another quote from here :
"Crucially, Hooks work side-by-side with existing code so you can
adopt them gradually. There is no rush to migrate to Hooks. We
recommend avoiding any “big rewrites”, especially for existing,
complex class components. It takes a bit of a mindshift to start
“thinking in Hooks”. In our experience, it’s best to practice using
Hooks in new and non-critical components first, and ensure that
everybody on your team feels comfortable with them."
Related
I am working on a React project that was built primarily using React Class Components. Recently, the team decided to begin pivoting to functional components with hooks.
Is there a way for functional and class components to access the same contexts? In other words, if I have a context provider that is set up as a class/consumed by class components, can I then use a down-stream functional component to access and update that context?
The same question goes the other way (setting up provider to use useContext() hook and accessing it through a class component)
I have seen a lot online about "how to use context api," but have yet to see one that combines them instead of simply explaining the two ways to use context.
You can still use context in class based components.
Better still, just turn the particular component you're trying to refractor to a function based component.
Doesn't necessarily mean to rewrite the code.. just change things like the the class to const and the name of the component.
Next remove the render method and leave only the return.
Every other thing like the creating functions can be done above the return and inside the component body like regular functions.
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.
Hi I'm very new in React. I've started learning React in the past 2 weeks, and I'm currently making a website using the MERN stack with a friend. I've been using class components whenever I saw a need for maintaining states, but I just discovered that hooks can mimic React classes and supposedly reduces code length, increases readability, and creates more maintainable code. So I'm just wondering, should class components be used in React as of 2020 when hooks exist? What use cases do classes cover that aren't covered by functional components?
it's preference thing but the community is moving towards hooks.
Hooks + other features can pretty much cover everything done in hooks
e.g.
useEffect => componentDidMount, componentDidUpdate, componentWillMount
useState => this.setState({})
React.memo => shouldComponentUpdate
some things are easier in classes than they are in hooks at the moment. like the second argument in setState is a callback to ensure that state is changed before executing. this is possible in hooks but it's not quite as clean as that
Hooks are meant as a complete replacement for class components. From react docs,
We intend for Hooks to cover all existing use cases for classes, but we will keep supporting class components for the foreseeable future.
Reading the page linked above about the adoption strategy, the intent behind hooks - would be a great place to understand and form an opinion.
Personally, I love hooks. And haven't used class components since hooks were introduced. I am yet to find a use-case where I needed to use a class component because hooks couldn't satisfy the ask.
I'm developing a React component library for a web site. For local development I use Storybook. I think bit can be a good tool (better than npm link) for exporting library components and import them into the web site repo. Now the problem is that I'm using global context for some components but bit components must be isolated and self-sufficient. I don't want to wrap all my tiny components that use global context only to render them on bit.dev!
I have been able to resolve the same problem with storybook using decorators. So, I define a component without wrapping it with a ContextProvider and then in the stories file I use a decorator that wraps my component with the ContextProvider.
Is there a way to wrap bit components with global context provider without wrapping the actual component that will be used in production web site where a single global context provider wrap the entire app? What about best practices about this kind of workflow?
Using global context when implementing reusable components is not recommended.
Not only when using Bit, but when another project consumes a component it needs to have the same exact context for the component to work. Making the component less reusable and attractive to consumers.
The fact that this is not comfortable for rendering examples on the playground in bit.dev is a side-effect for it.
What you can do is either decouple the state from the component and use the params to get state and actions directly, via APIs. Or you can encapsulate the state inside the component.
You can read more about it in Bit's best practices for building reusable components - https://docs.bit.dev/docs/best-practices#state-managers
and also here - https://github.com/Tallyb/reusable-components-styleguide#globals
I am new to using react hooks api.
Earlier I used to distinguish container components and presentational components.
The project directory structure was according to this distinction.
Container components used to inject store state and action creators to the component through props.
With hooks I have been left clueless how the directory structure should be and whether the hooks should be injected to the component through props or simply imported inside the component.
Should there be a containers and components distinction.
The redux documentation which describes container and presentational components also doesn't seem to be updated for hooks.
Any relevant article or answer is welcome.
About the separation between container components and presentational components, Dan Abramov (working on ReactJs, co-author of Redux and Create React App) wrote this in Presentational and Container Components :
Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.
As user adel commented, there is now hook equivalents of react-redux stuff. To read redux state, instead of connect, you can use useSelector.
import { useSelector } from 'react-redux'
..
const somePieceOfData = useSelector( state => state.path.to.data )
About container components, you can still seperate your container, using react-redux hook stuff. There is nothing about that with react-redux.
I am also running into the same problem now and was looking for some nice resources in that , but here what I've reached:
There is no big need for the distinction now between UI and container components, you can use custom hooks for the same purpose and you will have fewer lines of code and more readable one. From what I've read (i didn't experiment this yet) but it should have better performance as using functional components including custom hooks inc the app performance.
Take a look at this :
https://dev.to/jenc/discuss-react-hooks-and-life-after-the-container-component-pattern-5bn