Refactoring a class based component to a Functional component

Asked
Active3 hr before
Viewed126 times

9 Answers

functionalcomponentclassbased
90%

To restructure a class component into a function component we should consider that a plain JavaScript function component is stateless, intended to keep the focus on the presentation and improve reusability through a modular approach. This means that we have to maintain our state in a parent component and pass it down to our function components as props.,Since we only needed our parent Login class component to maintain the state of our form, we can now completely replace it by adding the useState Hook to our function component.,Up until React version 16.8, we could either define a new component as a JavaScript function, that received props (or inputs) and returned a React element describing what should be displayed on the screen, or as an ES6 class with a local state and lifecycle methods.

React 16.8 introduced Hooks to allow stateless function components to maintain its own state without the added complexity of lifecycle methods in classes, keeping the structure of our code easy to read and the stateful logic reusable. One of the basic built-in Hooks provided by React is useState:

const [state, setState] = useState(initialState);
88%

A React component can be considered as a class with a render method, or a function returning JSX. The example below is a class component:,The class component has the following design:,Start by creating a class that extends React.Component

Pretag
 Pretag team - issue, fix, solve, resolve
72%

If you are like me, you’ve been told that functional components are more efficient, cleaner, or “just better” and that you should try out using hooks. But you’ve been avoiding it. Because you’re pretty comfy using setState() and lifecycle methods and it’s working…,And Viola! You have a functional component that utilizes state and lifecycle methods!,Remember, we could pass nothing here to indicate it should run anytime the component updates at all, or an array of dependency variables whose change we want to trigger the function

Pretag
 Pretag team - issue, fix, solve, resolve
65%

## Why functional components over class based ones?,**And here they are as functional components:**,**Here is our class based List component:**

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Up until early this year with the release of React 16.8 in February, we as React developers have had to rely on class components to create any components that needed to rely on their own internal state.,Hooks are certainly the future of React, and hopefully, I have helped illustrate just why that is in this simple example.,I greatly prefer how much simpler the code is with the useState hooks as compared to the traditional way of handling state in class components, and the process itself was simple.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

This code is an example of how you can convert a class-based React component with state to a functional component using Hooks.,This demonstrates how you can convert a class-based component with multiple state properties to a functional component using the useState() Hook.,Let’s take a look at class-based components with state and learn how to convert them to functional components using Hooks.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

A stateless-functional component that was refactored to a class-based component just so we could track the state of the Sidebar (to open and close it via a button, and open it after navigating to a new page).,And next time you find yourself about to change a functional component to a class-based component, ask yourself:,This is another case, where a functional component was turned into a class based one just for a simple bit of state.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

We have a render prop based <Query /> class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component that uses the hooks useReducer, useContext, and useEffect.,[03:01] We actually only want to call this callback function when our query and our variables have changed. We're doing that in our old class component here with componentDidUpdate. We verify that the query and variables have changed.,[03:14] If either one of those have, then we'll re-run the query. We want to simulate that same behavior with our useEffect hook. As a second argument to here, I'm going to pass in my query and variables. Perfect.

Pretag
 Pretag team - issue, fix, solve, resolve
48%

If you've got a slightly older codebase, and you'd like to refactor some of your components into function components, then you're in the right place!,Most of the time all that's being done in the constructor of a class component anyway is setting up state, and binding event listeners. Both these things are handled differently in function components so we're good.,Since the React 16.8 update which added hooks to function components, you might have seen function components replacing class components everywhere.

// Example class component

class MyComponent extends React.Component {
  
  render() {
    return <p>Hello, {this.props.name}  
  }
  
}


//Example function component

function MyComponent(props) {
  return <p>Hello, {props.name}</p>
}
load more v

Other "functional-component" queries related to "Refactoring a class based component to a Functional component"