I am a beginner in React learning it for the last 3 months, However, the way to implement ponents has split into 2 kinds functional and class. As of 2021 which path to advance in learning, functional Style or class style ponents.
- How will the development approach will be adapted in the long run maybe next 5 years
- Based on the style I can focus on design pattern and architecture style for that particular ponent style.
I am a beginner in React learning it for the last 3 months, However, the way to implement ponents has split into 2 kinds functional and class. As of 2021 which path to advance in learning, functional Style or class style ponents.
- How will the development approach will be adapted in the long run maybe next 5 years
- Based on the style I can focus on design pattern and architecture style for that particular ponent style.
- 1 Functional is the future. github./reactjs/reactjs/issues/3308 – lewislbr Commented Jan 7, 2021 at 7:52
- Here is some motivation why react would advice using functional ponents with hooks. – HMR Commented Jan 7, 2021 at 8:51
4 Answers
Reset to default 10For the long run, you should focus on functional ponents, as react team has suggested to use functional ponents with hooks to manage the state for ponent.
But that does not mean you should pletely ignore class ponents. The reason is in professional life you may e up with the code base that was written before the introduction of hooks using class ponents and you are not allowed to refactor it to functional ponents ( there can be various reasons of not doing that) in that case your knowledge about class ponents will e in handy.
I don't want to mention other people, I want to share my experience, ill Use the class ponent when I want call an action or API call, and when I want state change and flexible data change use the functional ponent!
Look at this example and you will find which one is better:
Note: Also Check when you pass the same value inside the input
Class ponent :
let AppRender = 0;
class App extends React.Component {
state = {
hello: ""
}
setHello = (value) => this.setState({hello:value})
render() {
return(
<div>
<h2>Hello {this.state.hello}</h2>
<p>AppRender : {++AppRender}</p>
<Child setHello={this.setHello}/>
</div>
)
}
}
let ChildRender = 0;
class Child extends React.Component {
state = {
input: "World"
}
buttonHandler = () => {
this.props.setHello(this.state.input)
}
inputHandler = (e) => {
this.setState({input:e.target.value})
}
ponentDidMount() {
this.props.setHello(this.state.input)
};
render() {
return (
<div>
<p>ChildRender : {++ChildRender}</p>
<input type="text" value={this.state.input} onChange={this.inputHandler}></input>
<button onClick={this.buttonHandler}>Say Hello</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("react"));<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>Functional ponent:
let AppRender = 0;
const App = () => {
const [hello , setHello] = React.useState("")
return(
<div>
<h2>Hello {hello}</h2>
<p>AppRender : {++AppRender}</p>
<Child setHello={setHello}/>
</div>
)
}
let ChildRender = 0;
const Child = ({setHello}) => {
const [input , setInput] = React.useState("World")
const buttonHandler = () => {
setHello(input)
}
const inputHandler = (e) => {
setInput(e.target.value)
}
React.useEffect(() => {
setHello(input)
}, []);
return(
<div>
<p>ChildRender : {++ChildRender}</p>
<input type="text" value={input} onChange={inputHandler}></input>
<button onClick={buttonHandler}>Say Hello</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("react"));<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>There's really little to choose between them but you'll find that a lot of tutorials and guides are now written for functional ponents and, for someone who's just starting out, you might want to stick with what you can easily find relevant information for. Also, even the React team are focusing more on functional ponents and I strongly believe class ponents would be quietly phased out over the next couple years so maybe go with functional ponents.
I think the question you are asking is hooks vs classes, because functional ponents have existed since the beginning of React. Before hooks, there were certain limitations to what you can do with functional ponents and you had to use class ponents to make a React application. But since hooks were introduced now you can do everything you could with classes in a functional ponent.
Hooks is definitely the way to go right now. Its even mentioned in the React documentation itself:
In the longer term, we expect Hooks to be the primary way people write React ponents.
https://reactjs/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both