CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooks
siva charan
siva charan

Reputation: 71

React functional components vs class components

I am a beginner in React learning it for the last 3 months, However, the way to implement components has split into 2 kinds functional and class. As of 2021 which path to advance in learning, functional Style or class style components.

Upvotes: 2

Views: 7400

Answers (4)

CoderLean
CoderLean

Reputation: 232

There's really little to choose between them but you'll find that a lot of tutorials and guides are now written for functional components 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 components and I strongly believe class components would be quietly phased out over the next couple years so maybe go with functional components.

Upvotes: 2

b3hr4d
b3hr4d

Reputation: 4528

I don't want to mention other people, I want to share my experience, ill Use the class component when I want call an action or API call, and when I want state change and flexible data change use the functional component!

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 component :

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})
  }
  componentDidMount() {
    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.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Functional component:

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.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 3

Mudassar hassan
Mudassar hassan

Reputation: 171

For the long run, you should focus on functional components, as react team has suggested to use functional components with hooks to manage the state for component.

But that does not mean you should completely ignore class components. The reason is in professional life you may come up with the code base that was written before the introduction of hooks using class components and you are not allowed to refactor it to functional components ( there can be various reasons of not doing that) in that case your knowledge about class components will come in handy.

Upvotes: 10

Sagar Shakya
Sagar Shakya

Reputation: 654

I think the question you are asking is hooks vs classes, because functional components have existed since the beginning of React. Before hooks, there were certain limitations to what you can do with functional components and you had to use class components to make a React application. But since hooks were introduced now you can do everything you could with classes in a functional component.

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 components.

https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

Upvotes: 1

Related Questions