how I can manipulate state in functional component without using hook state? because it 's supported after 16.x version. I can't update current react version (it's very old and stability project). The problem is in the libraries used in the project, which use React.PropTypes instead just PropTypes :( thanks for your answers
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.
When I inspect component structure in React dev tools, I can see that there is a forwardRef mark. I am perplexed because there is no sign of it being used in the source code. How is it that it is there and how can I use it?
The forwardRef calls aren't in your own code, they are in the packages that you are using.
styled.button appears to be from styled-components. This package uses forwardRef to forward any ref that you set on your styled button component to the underlying button component. You can see it in their source code right here:
WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);
Usage of forwardRef began with styled-components v4 -- see step #2 on this migration guide:
Make sure your application is using react >= 16.3; internally we are using the new React.forwardRef API and new context APIs if you wish to try and polyfill for older React version support
It is also explained on this Tips and Tricks page:
Refs to DOM nodes
styled-components makes use of the new React 16.3 API forwardRef. Thus, set refs like you would on any other component and they will automatically resolve to the underlying DOM element or wrapped component class instance.
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.
This question already has answers here:
When to use ES6 class based React components vs. functional ES6 React components?
(7 answers)
Closed 1 year ago.
Are class components being abandoned?
I see that in several libraries examples have function components as a priority.
Especially React Navigation.
Likewise, React itself with Hooks only makes them available for function components.
The main question is: Why are function components being so prioritized?
No, i think Class Components won't be abandoned today. Maybe in future.
They aren't lightweight as Functional Components can be, but i see a lot projects on community using Class Components.
However, here we have some reasons why the community is supporting the Functional Components approach:
Class Components requires more code but will also give you some benefits which you will see later on (the transpiled code by Babel will be larger too)
A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
Functional component are much easier to read and test because they are plain JavaScript functions (less code).
The React team mentioned that there may be a performance boost for functional component in future React version
See this answer: https://stackoverflow.com/a/49613435/4119452
More info: https://www.twilio.com/blog/react-choose-functional-components
now a days, class components and functional components are almost same. In functional component Hooks were not introduced before and to make equivalent of class component, functional component gets new hooks like useState, useRef, useMemo which are equivalent to this.state, React.createRef and PureComponent.
Moreover, componentDidUpdate on class component can be used useEffect on functional component.
More details please check
Functional Components vs Class Components in React and React JS — Understanding Functional & Class Components
Hooks-first approach [Update 2020]
React team is currently re-building docs with Hooks-first approach which should be a preference for all new features and apps:
In future, is there any chance that Class Components becoming deprecated?
Class components are going to be around for years to come—for example,
there are tens of thousands in production at Facebook already.
However, we do recommend that new apps be built with function
components and Hooks, which is why we want those docs front and
center.
https://github.com/reactjs/reactjs.org/issues/3308
I am experiencing some serious fatigue when I tried wiring up redux with react router vs mobx with react router. I also tried to wire up a top level state with router's render func, but since router do not refresh, that method will fail. My state management requirement is rather simple and I am feeling redux or mobx are overkill. All I really need is a top-level state provider that acts as if just like any other component level state and use callback a way to manipulate it.
Been googling and looking at different solutions for the whole morning, however, I can't find a readily available solution with default react state that can work with react router (v4).
Is there a solution avaible? or its really something not possible to do when it comes to state with react router?
How did you setup Mobx? Maybe you're overthinking it. You can setup a top-level observable object that pretty much mimics the standard component state, but with all benefits of reactive programming.
If you use the <Provider> wrapper component from the mobx-react package that store becomes accessible to all your child components using #inject. In combination with #observer any component that depends on your store will update when you change it.
Check out this code sandbox example I created to showcase this for you:
https://codesandbox.io/s/jzv73o97r5
you can try it with react router v6 it has some optimistic approach to do so