Functional React - refactor your Class components within a SharePoint Framework (SPFx) Web Part

In this post, I’ll guide you through the process refactoring a boilerplate React class component within an SPFx project to be a functional component. In doing so, I’ll highlight why this is, in my opinion, the best approach from simplicity, readability and extensibility perspectives.

Refactoring class components

What you’ll learn in this video:

1) Adding a new Web Part to an existing SPFx project. 2) Understanding of one of the lifecycle methods in React class components; componentDidUpdate. Invoked whenever an update is passed to the component. 3) How to refactor a class component into a functional component. 4) How to implement the useEffect hook. 5) Simulate a REST API call and delay updating of the interface.

By the end of this tutorial, you’ll have refactored a class component to being a functional component and applied some conditional rendering on SharePoint DOM elements.