# \[React\] Class vs function component, which one should i be adapted?

**URL:** <https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259>\
**Category:** General\
**Created:** [June 14, 2020, 5:50am UTC](https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259 "2020-06-14T05:50:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![devgony](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/devgony/32/143722_2.png) [@devgony](https://forum.freecodecamp.org/u/devgony)\
**Post date:** [June 14, 2020, 5:50am UTC](https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259/1 "2020-06-14T05:50:20Z")

</div>

It’s been a 2 month since i started to learn react.  
When i learned React on FCC, I felt like Class component would be latest version compared with function component.  
But whenever i struggle with come practical cases, i always found the solution with the hooks like useState, useEffect, useHistory.

Now i know how to convert the useState and useEffect to class component version but still consufing with the useHistory

```auto
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

```

And i realiezed that we cannot use this kinda hooks in class component.

1. How do we use useHistory in class component?
2. And Which one should i try to be adapted to use between class and functino component?

---

<div class="post-metadata">

**Author:** ![nemo\_oudeis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nemo_oudeis/32/132510_2.png) [@nemo\_oudeis](https://forum.freecodecamp.org/u/nemo_oudeis)\
**Post date:** [June 14, 2020, 12:04pm UTC](https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259/2 "2020-06-14T12:04:37Z")

</div>

Function components are a somewhat recent feature of React, so a lot of “older” material does not cover them.

As far as I know you cannot use hooks like `useHistory`, `useState`, `useEffect` etc. in class components.  
The good news is that you can use function and class components side by side. So if your component is not too complex the path of least resistance is to refactor it to a function component. If you decide to go this route the [React Hooks FAQ has a good outline how to map class lifecycle functions to hooks](https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks)

If your existing code base makes extensive use of the the class component lifecycle callbacks (`componentDidMount`, `compontentShouldUpdate` etc.) this migration might be too effort. In that case you can consider using an older version of react router, for example the docs for react router 3.x are all based on class components. That’s not a great solution as well, but might work temporarily.

The React docs also clearly state that [classes are not going away](https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy) so you shouldn’t rewrite all your code and forget about class components. I suggest you slowly adopt function components (and hooks) as you go.

No perfect solution, but I hope it helps anyways.

Cheers  
Nemo

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [June 14, 2020, 3:39pm UTC](https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259/3 "2020-06-14T15:39:37Z")

</div>

You can use the [history object](https://reacttraining.com/react-router/web/api/history) in a class component ([props](https://reacttraining.com/react-router/web/api/Route/route-props)) and there is a HOC [withRouter](https://reacttraining.com/react-router/web/api/withRouter) you can use as well ([usage info](https://dev.to/kozakrisz/react-router---how-to-pass-history-object-to-a-component-3l0j), more [examples](https://stackoverflow.com/questions/59402649/how-can-i-use-history-pushpath-in-react-router-5-1-2-in-stateful-component)).

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:49pm UTC](https://forum.freecodecamp.org/t/react-class-vs-function-component-which-one-should-i-be-adapted/403259/4 "2021-06-01T18:49:55Z")

</div>

Closed on June 1, 2021, 6:49pm UTC