 The current version of the Yeoman Generator for the SharePoint framework still uses the old style class-based components for React. Because that's what you get by default, that's what most developers end up using when they create their React-based web parts. But functional components enabled by React Hooks have become wildly popular. I get a lot of questions on how to use React Hooks in SharePoint framework projects. So until Microsoft updates the Yeoman Generator, I'm going to show you how you can change your new projects to React Hooks in just a couple of minutes. And then I'm going to show you in a few more minutes the basics of Hooks with a simple example so you can really get started. So let's get to it. Hey, I'm Andrew. And if you're new here, please be sure to hit that subscribe button to stay up to date on all my videos for developers about Microsoft 365, Microsoft Azure, and the SharePoint framework. Let's start by looking at the current state of React and SharePoint framework projects. Hooks were added to React version 16.8 and they let you use a component's state and other React features without having to write classes. I love them because I find that I write a lot less code and the code that I do write is a lot more expressive of what I want to have happen when other things occur on the page. The SharePoint framework has supported React 16.8 since SPFX v1.9.1 was released in August of 2019. But we still can't easily use Hooks. Why? Because even today in 2022, with the SharePoint framework version 1.15.2, the Yeoman Generator for SPFX, it's still creating React class-based components. And we can see that here when we create a brand new project, a brand new web part project with React, we can see that it's got it set up to have a class that's being exported and we can see that it's using the React.component object. Now, while there's nothing wrong with these class components, let's look at how to convert this project to a functional component that leverages React Hooks. Converting the default class component to a functional component, it's actually really simple. All I need to do is convert this from creating a class and exporting my class to simply exporting an object that is going to be using a functional component. So I can do that by switching this over to a constant and we'll just leave it the same name as SPFX React Hooks. But this time, I'm going to say that it is an implementing or inheriting from the React functional component. I'm still using the same public property interface here to define all my public properties. But I can get rid of the state property as the second parameter in this generic. And then finally, what it's going to do is it's going to pass in my props and then return that back as a function. Now, I need to return this back to the caller. So I'm going to come back down here to the bottom and I'm going to say export default that object. And then the other thing that I need to do here is I want to get rid of this render method because that render method is not going to be used at all in my project now. Now we're just going to be returning the actual JSX, the actual structure that we want to have rendered on our page. Now, the other change I need to make here is because we're no longer a class, the this object is no longer necessary. So I'm going to go ahead and remove that as well. Now to make sure that this is working, I'm going to go ahead and fire this up in the hosted workbench. And I go ahead and add this web part to the page and we can see that our web part is actually working. Okay, now that the project is using a functional component, let's see how we can use React hooks in this project. One of the most common things we do in React components is we work with the state. Let's see how we can do this with React, with the React hook called use state. But jump back to my project. What I'm going to do is I'm going to implement, I'm going to inherit from or import in one of the hooks that are available to us in the React library. And that's the use state. Now, to define my state, all I have to do is create a new constant and I'm going to define that as calling a use state. I'm going to call the use state method. And then I'm going to say that this state is going to be a number that initializes to one. All this is going to be is a counter property. So this is this, this counter right here, all this is the same way of defining a state property, the same way we did before, but without having to use those interfaces. The second parameter is going to be passed in is the method that I want to be able to call to change this state value. So in my case, I'm just going to name it setCounter. Now, it's defaulting to one. So let's go ahead and let's update our UI so that we can actually see this value show up. So I'm going to go ahead and get rid of a whole bunch of stuff here so we can just keep focused on what we want to stay focused on. And I'll say that this is the counter and I'll set the value of the counter right here on this item. And we'll get rid of that environment message. After giving my web part a second to rebuild, I'm going to go ahead and refresh it in the page. And we'll see that we have our counter showing up as counter number one. So that's all there is to adding state, but we want to do something a little bit more than that, right? With the state property created and showing up in our component, let's now tackle two more common things we want to do. I want to have an event handler so that when something happens on the page, I want to update the state property, which is going to trigger the repainting of the component on the page. And in this case, what I'm going to do is add a button that increments the counter whenever the button is clicked. So what I'll do is come down just under my counter and I'm going to add in a button that just has a plus as the text is going to show up on the button. And I'm going to implement the on click event. I'm going to say that whenever this is called, I want to call the function or my handler called on button click. So now I need to go implement on button click. So I'll do that by coming up here I'm going to add a new function called on button click and this function is going to take no parameters in, it's not going to return anything back and it's simply going to update the counter. Now let's think about this for a second. Before we want to go through and change our state values, we'd have to do a lot more stuff than I'm going to show you in just a second. Things like if you recall, I'd say this dot set state. And then if I want to work with the existing state and change the value of an existing value on my state, but I want to get the value of the previous value of the state, I'd have to pass that in. So say something like previous state, I'm going to pass that in and I want to return back another object. So the object I'll return back, well, it's just going to be whatever the previous state was, but then I want to change one of the value one. Like for in our case, maybe the previous state had a counter property. So I want to say previous state, whatever that counter property was, plus one. So that's how we used to have to go through and to set our state values. Thankfully, we don't have to do this anymore because we define something called set counter that allows us to take the existing counter and just add one to it so we can increment it. The nice thing with this is I only have to focus on the one thing that I want to change. In our case, the counter, I don't have to worry about everything else. And I think I just spotted a typo down here. So we'll get rid of one of those curly brackets. All right, so let's see if this works. Come back over to my page and refresh it. Should have a button. And when I click the button, we see our counter is incrementing. All right, cool. So now we've been able to see an event handler that's going to respond to our button and it's going to allow us to go through and update the state value. Now let's see how we can hook into side effects happening with our component with the use effect hook. In this example, I'll add a new state property to indicate if the counter value is even or odd. It needs to change whenever the counter value is actually changing. Sure, I could have implemented this directly in the rendering of the component, but it's a simple example to show how side effects are going to work. I'm going to go back to my code, jump back up to the top, and I'm going to import in another hook called the use effect. And this is effectively a way for me to say I want to add a side effect for something to happen when another thing happens on the page. So in my example, what I'm going to do is I'm going to add in a new call here to use effect. And this is going to take in, it's going to have a function that's going to run. I want some code to run whenever this side effect runs. Now, one of the things I can do is I can say I only want this to run when a certain thing changes on the page. And in my case, I only want it to run when my counter property changes. So what I'm going to do is I'm going to create a new state value called even or odd. And then I'm going to have it set to even or odd. And this is going to be a string. And then I want to put something else in here is what the string I'm going to end up having in for this. So we'll just default it to an empty string right now. So what do I want to have happen? Well, I want to set the even or odd property. I want to set that to a value of either even or odd based on the number of the counter. So let's say if I do counter modulo 2, if it equals 0, then what I want to do is I want to say that should be equal to even if it is equal to 0. But if it's not, if there's a number left over remainder, then I know it's an odd number. So I'll say odd at the very end. Now let's grab my even odd and let's go ahead and let's add those at the end to the UX of our page. So I'll do that by just adding in an even or odd statement. Now that I've given my web part a second to rebuild, let's refresh the page. And now when I click on this, my button, we should start seeing the values change as we're going back and forth between the counter. But notice all my button did was change the counter. We have a side effect that's listening for the counter state value to change, is going to run our code to be able to change that other property. Now one of the things that's cool with this is that even though we're setting two state values, React isn't actually repainting the page twice or not necessarily. It actually batches a lot of those state changes together. So we can actually see that even though the state changes are happening, it looks like they're happening sequentially. They're all still happening at once. And in this case here, I'm only getting one repaint on the screen. So it's optimized like that under the coverage. We have to worry about the details of how that's done. So now let's see how we can tackle a common requirement, initializing a component. So in class components, we're used to using the React lifecycle methods of component did mount or component did update. Now the way that you would do the same thing with hooks is to use the use effect hook, but you're going to do it with an empty array of dependencies. So let me add some SharePoint framework sauce to this. And let's get some data from the SharePoint REST API when this component loads. So what I'm going to do is we're going to come over and we're going to add a new state value here. And this is going to be our site lists. So I'm going to have these set site lists. And this is just going to be an array of strings that we're going to pass in. So initially it's going to be an empty array. Now to be able to get data from a SharePoint REST API, I need to go through and import two more statements, my SP HTTP client and my SP HTTP client response objects. So now let's go through and implement what would be effectively considered our init method in our class. So I'm going to say use effect again, and this is going to pass in a function in here. Now I want to make an asynchronous call in here. So what I'm going to do is I'm just going to create an anonymous method or a nameless method here. It's going to be async, pass that in, and then when this is finished, it's going to simply just call that method. And what this method is going to do here is I'm going to get an endpoint to look at the current SharePoint site, look at the current endpoint list, grab the title property from the list. I only want visible list. I'm going to sort by the title and just give me the top 10 results. Then I'm going to go through and take my raw response. I'm going to say go to the SharePoint HP client, issue the get command to that endpoint. And when I get that value back, I'm simply going to walk through all the data that we got back. I'm going to convert it to JSON, look at his value property, which is an array of all the lists that we got back. I'm going to map that array to just return back the string. So I'm going from an array of objects with the title property. I'm simply just going to map that back to an array of strings. Now there's a couple of little things that I have to do here to make sure that this is going to work. I need to pass in a property here for the current site URL and the SharePoint client that we need. So I'm going to go ahead and add a comment here to our parameters or to our public properties on our component. And then I'm going to go back to the web part that actually hosts this component. And I'm simply going to add in those two properties. So the current site URL is equal to the current page context.web.absoluteurl. And then the client is going to be the SPHCP client object that I'm passing in. And then we are also going to have to go in and modify our public property or interface that defines the properties for those public properties on our class. So I'll go ahead and save those changes. Now, one thing I'm going to do is a little trick with this is I'm going to go ahead and I'm going to pass in an empty array of dependencies. And I'll explain why I'm doing that in just a few minutes. Now that all that's done, let's go and let's write out the data for our list. So I'm going to come back over here to my return statement inside of my array. And what I'm going to do is add in an unordered list. And what we're going to do is we're going to look at the SiteList state property. And I'm going to map each one of those lists which is just a string because remember that's just an array. I'm going to map each one of those to the following component. It's going to be a list item and then it's just going to be the name of the list. So now I'll save my changes and come back over to the browser. And once the build toolchain has had a chance to go through and rebuild my web part, I'll refresh it. And now we can see a bunch or we have a little rendering issue here. That's fine. But we can still see that it is now it's fetching all that data and the initial load of our web part. Now, one thing I do want to mention here about using the use effect hook for initialization of the component. Now, if I go back to the code, note that I didn't pass or that I passed in this empty array here into this use effect. If I had not done that, if I had just left this empty and just passed in no object right here, the effect would actually run after every single render of the component. Now, in this case, that's clearly not what I want to have happen. I don't want to get the list of SharePoint lists every single time the component is repainted on the screen. So to tell React that I only want it to run when the component is mounted and unmounted on the page, I give it an empty array and what that does is that tells React that this effect doesn't depend on anything. So that effectively is going to tell React, hey, only run this when the component first is mounted and when it's unmounted. If you don't pass anything in, like an empty array is something, but if I pass nothing in, that says whenever you repaint the page, I want you to have this side effect that's going to run. So that's a way to go through and always have something happen if you want that to hook into that part of the life cycle. Pretty easy, right? Now, this was a really simple project, but if you want a copy of it, there's a link in the description below where you can download it. And I much prefer using React hooks and functional components over using those traditional class-based approach. And after showing you how little work is required to switch new components over to functional components to leverage hooks, I think it's worth it. What do you think about using React hooks in your SharePoint framework projects? Do you prefer using hooks and functional components over class components or not? Do you prefer class components? Let me know by dropping a comment below. Hey, if you like this video, please give me a thumbs up and subscribe by smashing that big red subscribe button below the video. So you'll see when I publish more videos for professional developers on Microsoft 365, Microsoft Azure, and including topics in the SharePoint framework and React.