React became the most popular frontend library partly due to its simplicity and gentle learning curve. You learn to make components, pass props to them, conditionally render, few hooks and that’s it, you are ready to make React applications. But what about some advanced principles and capabilities? Those are some built-in React <a href="https://react.dev/reference/react" target="_blank">hooks</a> and <a href="https://react.dev/reference/react/components" target="_blank">components</a> that are not necessary for simple applications but can prove to be truly handy when optimization comes to the table on more complex applications. <a href="https://cyberlab.rs/team" target="_blank">Our team</a> adheres to the principles of React, recognizing their immense value in building exceptional applications. <h2 style="text-align: justify;">React Hooks and Best Practices </h2>As a warm up, let’s start with a hook that everyone who has built a react application must have used: <h3 style="text-align: justify;">useState </h3>Lets you add a state variable to your component.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/useState.jpg" alt="useState react"><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(1).gif" alt="React use State" style="width: 1092px; height: 571px;"> Here we have a Count component that renders one button and when the user clicks on it, it will increment the counter and display a new number, a basic component that everyone once made. Of course, the useState hook is used for storing a variable. But this is not the correct way to do this! If you need to use the previous state to update the next one do it this way: <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/incr.png" alt="useState React " style="width: 1093px; height: 509px;"> Because changing state value happens asynchronously, you need to be sure that you are using the correct previous state in case when some other function changes it in the meantime. So you pass a function to setState that takes one parameter (previous state), does your calculation, and returns the next state. <h4 style="text-align: justify;">Handling multiple states </h4>The next example is something everyone has experienced - handling multiple states for input fields:<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Handling+multiple+states.png" alt="Handling multiple states react"> This code works, you have three inputs, three states for every one of them, and then three functions for changing those states. In short, we have code duplication that does the same thing for every state. The solution for shorter and simpler code is this: <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Handling+multiple+states+2.png" alt="Handling multiple states React" style="width: 1093px; height: 677px;"> We are using one state that has an object as a value, the properties of that object are values of input fields. Note that property names are the same as input ids! And we have one handle change function that accepts the change event parameter and uses it to handle value change like this: It calls setValues and passes the function to it with the previous value (that we learned in the previous example). Then we make a new object, destructure it and use the id of a change event (id of an input element) to set the input value to the object property of that name. That’s it! We now have a simpler and more readable code. <h3 style="text-align: justify;">useRef </h3>The useRef hook lets you reference a value that’s not needed for rendering.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(4).png" alt="useRef react" style="width: 1093px; height: 572px;"> In this example, we are referencing the id of some day-off entity and using it later when we need it. useRef is used here because we don’t need to trigger re-render when we change that value (The look of the application doesn’t depend on it. <h3 style="text-align: justify;"> Referencing HTML elements</h3><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/useREF.png" alt="Referencing HTML elements" style="width: 1093px; height: 675px;"> This is yet another usage of useRef. You can reference html elements using the ref attribute and then use it later to trigger some methods of that element, change some attributes, etc. In this example, we use it to focus on input by clicking on a button. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(2).gif" alt="Referencing HTML elements" style="width: 1093px; height: 572px;"> <h3>useEffect </h3>Lets you perform side effects.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(6).png" alt="UseEffect React" style="width: 1093px; height: 572px;"> Hook that I hope everyone is familiar with, if dependencies are empty, it will run on component mount, and if we return a function from it it will run it on unmount. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(7).png" alt="UseEffect React" style="width: 1092px; height: 571px; display: block; margin-left: auto; margin-right: auto;"> And also if we set some state as a dependency it will trigger useEffect when it changes. But what you can put as a dependency is a little bit tricky! Because of the way react compares it. In the background, it uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" target="_blank">Object.is()</a>&nbsp;a JavaScript method to compare its values. So if you are using primitive types as dependencies everything will be fine. But problems come when you want to use reference types. Primitive types: <ul><li style="text-align: justify;">boolean</li><li style="text-align: justify;">null</li><li style="text-align: justify;">undefined</li><li style="text-align: justify;">number</li><li style="text-align: justify;">bitInt</li><li style="text-align: justify;">string</li><li style="text-align: justify;">Symbol </li></ul> Reference types: <ul><li style="text-align: justify;">Object</li><li style="text-align: justify;">Array</li><li style="text-align: justify;">Function </li></ul> Note that Arrays and Functions are also objects but I mentioned them also for better understanding. So when you put an object as a dependent variable it will compare its reference and not the value itself. Reference points to the location of the object in memory and that is changed every time a render occurs. And that’s not what we want! So if you need to use an object as a dependent variable, there are two solutions: <h4>1. Use one of the object's primitive types:</h4><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(8).png" alt="Objects primitive types" style="width: 1093px; height: 572px; display: block; margin-left: auto; margin-right: auto;"> Here name property is a string (primitive type) so it will work as desired. <h4>2. Use JSON.stringify()</h4><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(9).png" alt="Use JSON.stringify()" style="width: 1093px; height: 572px; display: block; margin-left: auto; margin-right: auto;"> If depending on one or more primitive types of an object doesn’t do the job you can use stringify method to convert the whole object to a string. The negative sides of this approach is that this method can be slow on large objects! (And it looks ugly).&nbsp; <h3 style="text-align: justify;">useMemo </h3>Lets you cache the result of a calculation between re-renders.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(10).png" style="display: block; margin-left: auto; margin-right: auto; width: 1095px; height: 239px;" alt="UseMemo React"> This is one of the hooks used for optimization. In the example above we have some “expensive” function that calculates background, it has an array of dependencies meaning that it will recalculate only when some of the listed dependencies are changed. And the value of a background constant is cached between re-renders if the values of dependencies are unchanged. If we create this function without useMemo it will be executed on every re-render which is a performance risk if the function takes too long to execute, and especially if the component rerenders often. However, not everything should be cached with useMemo, you don’t need to overwhelm the memory, as some functions are okay to be executed every time. <h3 style="text-align: justify;">useCallback </h3>Lets you cache a function definition between re-renders. It’s similar to useMemo but the difference is that useMemo only caches a return value of some function whereas useCallback caches the whole function. What is the usage of that? You may ask, let’s see the next example:<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(11).png" alt="useCallback" style="width: 1093px; height: 844px;"> In this example if the ShippingForm component is re-rendered because of some state changes inside of it, the handleSubmit function will be recreated. That can slow down the application if the function is “expensive”. So using the useCallback, the function will be re-created only if dependency (productId in this case) is changed. <h3>useTransition </h3>Lets you update the state without blocking the UI.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(12).png" alt="useTransition" style="width: 1093px; height: 572px;"> Here we have a logic for changing tabs, while the selected tab is stored in the state. One of the tabs is slow, it takes some time to load. And if this example was without the useTransition, if a user clicks on a slow tab and then decides to switch before it loads, he would need to wait for it to finish loading. But if you use the useTransition hook, it will not block the UI and the user can immediately switch tabs. It also provides an isPending state that can be used for displaying the loader or something similar. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(3).gif" alt="useTransition" style="width: 1093px; height: 572px;"> <h3 style="text-align: justify;">useDefferedValue </h3>Lets you defer updating a part of the UI.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(13).png" alt="useDefferedValue" style="width: 1093px; height: 572px;"> If some state changes the component appearance of the component. In this case display of searched results. You can use the useDefferedValue hook to keep the previous value on display until a new one is loaded. The syntax is simple, just pass the state that triggers re-render to hook on initialization. And then use the value that the hook returns as it would otherwise be used. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(5).gif" style="display: block; margin-left: auto; margin-right: auto; width: 1093px; height: 572px;" alt="useDefferedValue"> <h2 style="text-align: justify;">Built-in React Components</h2><h3 style="text-align: justify;"><suspense></suspense>&lt;Suspense /&gt;</h3><suspense> Lets you display a fallback until its children have finished loading.</suspense><suspense><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(14).png" alt="Built-in React Components - Suspense" style="width: 1093px; height: 572px;"></suspense><suspense> </suspense><suspense>Suspense is one of Reacts built-in components, it has similar usage as the useDefferedValue hook. But instead of keeping the previous state on display, it shows the fallback component while the component is being rendered. Fallback is usually some form of a loader. You just wrap your component with Suspense and pass your loading component as a fallback prop. The example is the same as for useDefferedValue, so the behavior will look like this:</suspense><suspense> </suspense><suspense><img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Naslovna+fotografija+za+DevOps++(6).gif" alt="React built-in component Suspense" style="width: 1093px; height: 572px;"></suspense> <h2 style="text-align: justify;">Built-in React APIs </h2><h3 style="text-align: justify;">lazy() </h3>Lets you defer loading the component’s code until it is rendered for the first time.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/lazy.png" alt="built-in React APIs lazy" style="width: 1094px; height: 267px;"> lazy() is a built-in function that lets you improve the performance of your application by loading component only when it needs to be rendered for the first time. It comes useful in App.tsx file where you usually import all your pages and pass them to the router. So lazy function will prevent the page component from loading until the user visits it. <h3 style="text-align: justify;">memo() </h3>Lets you skip re-rendering a component when its props are unchanged.<img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/memo.png" alt="Built-in React APIs memo" style="width: 1091px; height: 340px;"> In React if the parent component re-renders it will also re-render all its child components. But if some of your child's components are heavy, you don’t want to re-render them every time. That’s when you use the memo() function that will re-render the component that you pass to it only when its props have been changed. KEEP IN MIND that if you are passing a function to the child component memo will not work because when the parent re-renders it will re-initialize function - thus changing its reference. That’s when you need to use the useCallback hook for caching function between re-renders. <h2 style="text-align: justify;">Conclusion </h2>Those were some hooks, components, and functions that are included in React library. Not all of them are covered in this article, and few are left, but I find this one most useful for building a good React application. Applications can be built only using useState and useEffect, but for advancing in React feel free to integrate this other aspect of <a href="https://cyberlab.rs/web-development" target="_blank">development.</a> You can find more documentation about React hooks on their <a href="https://react.dev/" target="_blank">documentation</a>. See you on our<a href="https://cyberlab.rs/blog" target="_blank"> blog </a>on the next topic.

React's popularity stems from its simplicity and gentle learning curve. Explore React hooks, components, and functions in our new blog post.

Elevate Your React Skills: Exploring Advanced Concepts and Best Practices