 Most React developers use React hooks to create React apps as evidenced by documentation, examples, and videos on YouTube. However, this is not the case in the Microsoft 365 development space where SharePoint framework developers still primarily use class components. Now, this is likely due to new SharePoint framework projects defaulting to a class component, which has been one of the last holdouts. Even Microsoft Teams projects created with the Visual Studio Teams Toolkit uses React hooks. Now, although I was late to switch over to React hooks, I quickly saw why so many others had made the switch. If you haven't made the switch yet, this video is probably going to be for you. In this episode, I'll explain why functional components enabled by hooks are better than class components, and why I prefer hooks even more. In your SharePoint framework developers, I've got something for you as well, so you can see how you can quickly convert your new SPFX web part projects over to using React hooks. Hey, I'm Andrew. If this topic interests you, please hit that like button below the video. It really helps me reach more people just like you and grow this channel. And if you're new here, consider subscribing to my channel with that button below the video so that you'll see what I publish more videos on Microsoft 365 and Azure for full stack developers. And check out my bi-weekly newsletter where I talk about the same topics in Share, the most important news in the Microsoft 365 and Azure space for full stack developers delivered straight to your inbox. For a long time, developers built React apps using class components. These components were used to manage state and side effects. Functional components, on the other hand, were only used for displaying static UX components. Prior to React version 16.8, React's API only supported class components. However, when hooks were introduced in version 16.8, they were like a cheat code that unlocked functional components and greatly reduced and simplified React component design and code. Functional components have become the preferred way of writing React components for several reasons. First is simplicity. Functional components are easier to read and understand. They're just JavaScript functions that take properties as input and return JSX or TSX as output. Class components, on the other hand, they can be much more verbose with a lot of boilerplate code such as a constructor, lifecycle methods, and binding functions. The second is reusability. Functional components are more reusable because they can easily be composed and combined to create more complex components. And they promote the use of composition over inheritance and encourage a more modular and scalable code structure. And the third is performance. Functional components can be more performing than class components due to the nature as just pure functions. They don't have the overhead of managing instances and lifecycle methods. And additionally, functional components can be optimized with React's memoization and hooks APIs to prevent unnecessary re-renders. If you don't know what memoization is, don't worry, I'll explain it throughout the video. And the fourth is the better patterns in code organization. Functional components encourage the use of modern JavaScript patterns like arrow functions and destructuring. And they also promote better code organization by separating concerns into smaller functions, making the code base easier to navigate, consume, and maintain. It's worth noting that class components are still fully supported in React. And there may be situations where they are more appropriate than functional components, such as when using certain third-party libraries or working with look legacy code bases. The decision of whether to use a functional or a class component, it ultimately depends on the specific needs and requirements of the project and you, the developer. Functional components enable the use of hooks and vice versa. Hooks provide a similar and more flexible way to handle state, lifecycle, and side effects in React components. Developers can reuse stateful logic across multiple components using hooks, eliminating the need for higher order components or rendering property patterns. Still not convinced hooks are the greatest things since intelligence for web developers. Not everybody agrees with me on this one. And before I dive into how hooks work, I want to call out a great conversation that I had with my friend, Julie Turner, who has a different perspective on hooks. We discussed two different mindsets to hooks from season one of our show on YouTube, the Cloud Dev Clarity Show that's episode nine. So how do hooks work? Well, a fundamental concept of a hook is memoization. Memoization is a technique that's used to optimize a component performance by caching the results of computationally expensive operations and recomputing them only when necessary. Hooks are implemented using React's memo API or the use memo hook. Memoizing large data sets or expensive operations can significantly improve component performance and reduce React's workload. Now let's take a look at some of the React hooks. Now, although it may not be used all that frequently, let's examine the use memo hook because it serves as the foundation for many of the other hooks that we're gonna explore. The use memo hook is used to memoize a value and prevent unnecessary re-renders. The hook is typically used when a computationally expensive operation needs to be performed such as, as I said earlier, filtering a large data set or performing a complex calculation. In this example, the use memo hook is used to memoize the filtered items value. The function passed the use memo hook filters the items array based on the search term value and returns a new array containing only the items that match the search term. The use memo hook is passed an array of dependencies which includes the items array and the search term value. And this means that the function will only be re-executed if either the items array or the search term value is gonna change. By using the use memo hook to memoize the filtered items value, we can prevent unnecessary re-renders of the component when the search term value changes, which can improve the performance and reduce the amount of work that React needs to do in the browser. Now, React provides many hooks out of the box but one of the most commonly used is the use state hook. Use state hook adds state to functional components of React and it returns an array with two values, the current state value and a function to update the state value. In this example, we use the use state hook to initialize the count state variable to zero. The set count function returned by the use state hook is used to update the count state variable when the button is clicked. Now, when the button is clicked, the increment function is gonna be called which in turn calls the set count function with the new count value. React then is going to re-render the component with the updated count value. Next up is the use effect hook. Now in React, the use effect hook is used to add side effects to functional components. The side effects or actions that affect something outside of the component, such as fetching data from an API, manipulating the DOM or setting up an event listener. Now, in this example, we use the use effect hook to fetch data from an API using the popular Axios library. The set users function is used to update the user state variable with the fetch data. Now, the second argument of the use effect hook is an empty array, which means that the side effect will only run one time when the component mounts. If we wanted the side effect to run whenever a specific state variable changes, we could add the variable to the array of dependencies. Now in React, the use callback hook can be used to memoize a function and prevent it from being recreated on each render. Now, this can be useful in scenarios where the component passes a function down to a child component as a property and that function is recreated on each render. This can cause an unnecessary re-render of the child component. And the first argument of the use callback hook is the function that needs to be memoized. The second argument is an array of dependencies that the function's gonna rely on. Now, if any of the dependencies change, the function's gonna be recreated. So in this example, the parent component is passing the handle click function down to the child component as a property. Since the handle click function relies on the set count function, which is a dependency that could change on each render, it could cause the unnecessary re-renders of the child component. But by using the use callback hook, we ensure that the handle click function is only recreated when the dependencies in the array change. In this case though, there are no dependencies. So the function is only created one time and the child component won't re-render unnecessarily. If you're working with a Microsoft Teams app, hooks have already been incorporated into the tools for creating them. So there's no extra work that you need to do on your part. However, for the SharePoint framework projects, it only takes a few minutes to update the default SharePoint framework React-based web part project to use hooks. Now check out my video in the associated article for how to change those SharePoint framework React web part projects to use hooks. What do you think about React hooks? If you're still using components for your React apps, are you interested in giving hooks a try? Let me know by dropping a comment below the video and let me know if you wanna see more videos about React hooks, especially in the context of Microsoft 365 apps. This was just a really quick primer on what hooks are all about. If you liked this video or you found it useful, please give me a thumbs up. It really helps me grow the channel by reaching more people just like you. And if you haven't already, subscribe by smashing that subscribe button below the video so that you're gonna see when I publish more videos for full stack developers on Microsoft 365 and Microsoft Azure. And let me know if you wanna see more videos about React hooks. I'm Andrew Connell, thanks for watching and I'll see you in the next video.