1 00:00:01,140 --> 00:00:02,700 ‫So we have talked about 2 00:00:02,700 --> 00:00:07,440 ‫and used the useEffect Hook a lot throughout the course. 3 00:00:07,440 --> 00:00:11,220 ‫Now, useEffect is probably the most confusing part 4 00:00:11,220 --> 00:00:14,970 ‫of React for beginners, which is why I decided 5 00:00:14,970 --> 00:00:18,060 ‫that I still need to clarify some more things 6 00:00:18,060 --> 00:00:21,903 ‫in the second part of the section and in this video. 7 00:00:22,980 --> 00:00:25,440 ‫And the first thing that I wanna do here 8 00:00:25,440 --> 00:00:28,440 ‫is to focus in great detail on the rules 9 00:00:28,440 --> 00:00:32,733 ‫and guidelines for specifying a correct dependency array. 10 00:00:33,600 --> 00:00:36,540 ‫Now, the first rule that we learned when we first talked 11 00:00:36,540 --> 00:00:40,410 ‫about useEffect was that every single state variable 12 00:00:40,410 --> 00:00:43,440 ‫and prop that's being used in the effect 13 00:00:43,440 --> 00:00:46,680 ‫must be included in the dependency array. 14 00:00:46,680 --> 00:00:50,400 ‫So this one is pretty clear by now, right? 15 00:00:50,400 --> 00:00:54,180 ‫However, this rule is not 100% complete 16 00:00:54,180 --> 00:00:56,340 ‫because of two things. 17 00:00:56,340 --> 00:01:00,600 ‫First, any context value that a component is subscribed to 18 00:01:00,600 --> 00:01:04,020 ‫must also be included in the dependency array. 19 00:01:04,020 --> 00:01:07,140 ‫And second, actually we must include 20 00:01:07,140 --> 00:01:09,390 ‫all so-called reactive values 21 00:01:09,390 --> 00:01:11,970 ‫in the dependency array as well. 22 00:01:11,970 --> 00:01:15,180 ‫But what is a reactive value? 23 00:01:15,180 --> 00:01:19,680 ‫Well, a reactive value is any value that is either state, 24 00:01:19,680 --> 00:01:23,820 ‫a prop, a context value, or any other value 25 00:01:23,820 --> 00:01:28,080 ‫that itself references one of the reactive values. 26 00:01:28,080 --> 00:01:31,830 ‫So examples of that are these two pieces of state, 27 00:01:31,830 --> 00:01:34,110 ‫these two variables right here, 28 00:01:34,110 --> 00:01:37,350 ‫so because they reference the duration state, 29 00:01:37,350 --> 00:01:40,260 ‫and even the format duration function, 30 00:01:40,260 --> 00:01:42,960 ‫because it references the reactive values, 31 00:01:42,960 --> 00:01:45,450 ‫minutes and seconds. 32 00:01:45,450 --> 00:01:48,990 ‫So basically all values that are somehow connected 33 00:01:48,990 --> 00:01:53,523 ‫to state, props, or context are reactive values. 34 00:01:54,510 --> 00:01:57,210 ‫Now, going back to our dependency array, 35 00:01:57,210 --> 00:02:00,060 ‫this means that every single reactive value 36 00:02:00,060 --> 00:02:04,650 ‫must be included, which again, includes any functions 37 00:02:04,650 --> 00:02:08,910 ‫or variables that reference any other reactive value. 38 00:02:08,910 --> 00:02:13,290 ‫And the goal of this is to avoid so-called stale closures 39 00:02:13,290 --> 00:02:17,580 ‫that would otherwise occur inside the effect function. 40 00:02:17,580 --> 00:02:20,370 ‫Now, these two rules that we just learned about 41 00:02:20,370 --> 00:02:23,280 ‫are pretty strict and tell us exactly 42 00:02:23,280 --> 00:02:26,400 ‫what must be included in the dependency array. 43 00:02:26,400 --> 00:02:29,220 ‫And so this means that basically 44 00:02:29,220 --> 00:02:32,640 ‫the dependencies choose themselves, right? 45 00:02:32,640 --> 00:02:36,120 ‫Because if we need to include all reactive values 46 00:02:36,120 --> 00:02:39,600 ‫in the list, there's not much to think about. 47 00:02:39,600 --> 00:02:43,590 ‫Therefore, you should never, ever ignore that ESLint rule 48 00:02:43,590 --> 00:02:46,740 ‫that we've seen time and time again warning us 49 00:02:46,740 --> 00:02:49,560 ‫about missing dependencies and ensuring 50 00:02:49,560 --> 00:02:53,790 ‫that our dependency arrays are correct at all times. 51 00:02:53,790 --> 00:02:56,340 ‫But of course, you want to understand 52 00:02:56,340 --> 00:02:58,560 ‫why you're missing the dependencies 53 00:02:58,560 --> 00:03:00,810 ‫that a linter is telling you about 54 00:03:00,810 --> 00:03:03,630 ‫and not just blindly follow the tool. 55 00:03:03,630 --> 00:03:07,260 ‫And so that's what this video is for. 56 00:03:07,260 --> 00:03:10,560 ‫Also, sometimes you might be in an environment 57 00:03:10,560 --> 00:03:12,660 ‫where the linter is not available, 58 00:03:12,660 --> 00:03:15,753 ‫and so then you really need to know what you're doing. 59 00:03:16,740 --> 00:03:19,620 ‫Okay, and now the final rule 60 00:03:19,620 --> 00:03:22,380 ‫is that you should not use objects 61 00:03:22,380 --> 00:03:26,670 ‫or arrays as dependencies, because when you do so, 62 00:03:26,670 --> 00:03:30,240 ‫it seems to work just fine, but in reality, 63 00:03:30,240 --> 00:03:33,900 ‫the effect will rerun on every single render. 64 00:03:33,900 --> 00:03:36,750 ‫The reason for that is that React checks 65 00:03:36,750 --> 00:03:39,540 ‫if dependencies have changed between renders 66 00:03:39,540 --> 00:03:43,710 ‫by simply comparing them using the triple equality operator. 67 00:03:43,710 --> 00:03:45,960 ‫However, as we already know 68 00:03:45,960 --> 00:03:48,780 ‫and already talked about in this section, 69 00:03:48,780 --> 00:03:52,080 ‫objects in JavaScript will have a different reference 70 00:03:52,080 --> 00:03:54,660 ‫each time that they are recreated. 71 00:03:54,660 --> 00:03:57,030 ‫And therefore, even if the content 72 00:03:57,030 --> 00:04:00,210 ‫of an object stays the same after a render, 73 00:04:00,210 --> 00:04:04,620 ‫React will still see the old and the new object as different 74 00:04:04,620 --> 00:04:08,430 ‫and will therefore rerun the effect. 75 00:04:08,430 --> 00:04:12,180 ‫Now, if you really do need an object as a dependency, 76 00:04:12,180 --> 00:04:15,300 ‫I have some solutions in the next slide. 77 00:04:15,300 --> 00:04:18,240 ‫But before we go there, it's important to note 78 00:04:18,240 --> 00:04:21,270 ‫that all these rules that we just talked about 79 00:04:21,270 --> 00:04:24,570 ‫work in the exact same way for the other hooks 80 00:04:24,570 --> 00:04:26,970 ‫that also have dependency arrays, 81 00:04:26,970 --> 00:04:29,923 ‫so useMemo and useCallback. 82 00:04:31,678 --> 00:04:34,050 ‫Okay, so as we just learned, 83 00:04:34,050 --> 00:04:36,690 ‫we must include all reactive values 84 00:04:36,690 --> 00:04:38,733 ‫in the list of dependencies. 85 00:04:39,934 --> 00:04:43,830 ‫React cost is not lying about dependencies. 86 00:04:43,830 --> 00:04:46,020 ‫However, in certain situations, 87 00:04:46,020 --> 00:04:49,110 ‫including every single dependency in the array, 88 00:04:49,110 --> 00:04:51,030 ‫can actually cost the effect 89 00:04:51,030 --> 00:04:54,990 ‫to run way too often and introduce problems. 90 00:04:54,990 --> 00:04:58,890 ‫But again, the solution is not to omit one 91 00:04:58,890 --> 00:05:03,570 ‫or more dependencies because that would be lying to React. 92 00:05:03,570 --> 00:05:06,540 ‫Instead, we can use one of the strategies 93 00:05:06,540 --> 00:05:10,170 ‫that can make some of the dependencies unnecessary, 94 00:05:10,170 --> 00:05:12,090 ‫and so then we can remove 95 00:05:12,090 --> 00:05:15,393 ‫those unnecessary dependencies from the array. 96 00:05:16,410 --> 00:05:18,810 ‫So first off, when you're dealing 97 00:05:18,810 --> 00:05:21,570 ‫with helper functions as dependencies, 98 00:05:21,570 --> 00:05:24,360 ‫the easiest way to remove the dependency 99 00:05:24,360 --> 00:05:28,380 ‫is to just move the function right into the effect. 100 00:05:28,380 --> 00:05:31,800 ‫Because if the function is inside the effect, 101 00:05:31,800 --> 00:05:35,970 ‫then it's no longer a dependency of the effect. 102 00:05:35,970 --> 00:05:38,100 ‫However, if you can't do that, 103 00:05:38,100 --> 00:05:41,790 ‫because you might need the same function in multiple places, 104 00:05:41,790 --> 00:05:45,093 ‫you can try to memoize it with useCallback. 105 00:05:45,960 --> 00:05:50,520 ‫Also, if the function is not a reactive value itself, 106 00:05:50,520 --> 00:05:54,810 ‫so if it doesn't use any reactive values inside the code, 107 00:05:54,810 --> 00:05:58,590 ‫then you can just move it entirely out of the component 108 00:05:58,590 --> 00:06:01,830 ‫because it's not really a dependency anyway. 109 00:06:01,830 --> 00:06:04,530 ‫And so by doing this, the function then 110 00:06:04,530 --> 00:06:08,130 ‫doesn't need to be recreated on every render. 111 00:06:08,130 --> 00:06:12,090 ‫Next up, if you want to use an object as a dependency, 112 00:06:12,090 --> 00:06:15,360 ‫you can try to not include the entire object, 113 00:06:15,360 --> 00:06:16,890 ‫but only the properties 114 00:06:16,890 --> 00:06:19,980 ‫that you actually need inside the effect. 115 00:06:19,980 --> 00:06:23,070 ‫And you can do this as long as these properties 116 00:06:23,070 --> 00:06:27,090 ‫are primitive values, like strings or numbers. 117 00:06:27,090 --> 00:06:29,940 ‫However, if for some reason that doesn't work 118 00:06:29,940 --> 00:06:31,920 ‫for your specific situation, 119 00:06:31,920 --> 00:06:34,050 ‫you can try one of the strategies 120 00:06:34,050 --> 00:06:38,610 ‫that I mentioned for functions as they are quite similar. 121 00:06:38,610 --> 00:06:42,540 ‫And finally, we have two other strategies. 122 00:06:42,540 --> 00:06:45,180 ‫First, if you find yourself in a situation 123 00:06:45,180 --> 00:06:49,440 ‫where your dependency list includes multiple reactive values 124 00:06:49,440 --> 00:06:51,570 ‫that are related to one another, 125 00:06:51,570 --> 00:06:55,203 ‫you can try using a reducer with useReducer. 126 00:06:56,100 --> 00:07:01,050 ‫So sometimes a reducer can really be like a secret weapon 127 00:07:01,050 --> 00:07:05,580 ‫that makes all your dependency problems completely go away. 128 00:07:05,580 --> 00:07:08,010 ‫Also, there is no need to include 129 00:07:08,010 --> 00:07:10,800 ‫the setState function from useState 130 00:07:10,800 --> 00:07:13,770 ‫or the dispatch function from useReducer 131 00:07:13,770 --> 00:07:17,370 ‫in the dependency list because React guarantees 132 00:07:17,370 --> 00:07:19,983 ‫that these are stable between renders. 133 00:07:21,420 --> 00:07:25,470 ‫And now to really wrap up this part about useEffect, 134 00:07:25,470 --> 00:07:29,760 ‫let me give you a maybe shocking reality about effects, 135 00:07:29,760 --> 00:07:33,780 ‫which is that effects should actually only be used 136 00:07:33,780 --> 00:07:38,670 ‫as a last resort when no other solution really makes sense. 137 00:07:38,670 --> 00:07:42,540 ‫That's the reason why React calls effects an escape hatch 138 00:07:42,540 --> 00:07:45,510 ‫to step outside of React. 139 00:07:45,510 --> 00:07:46,920 ‫Now, I'm telling you this 140 00:07:46,920 --> 00:07:51,008 ‫because when hooks were first introduced into React, 141 00:07:51,008 --> 00:07:54,240 ‫the useEffect Hook was being overused a lot 142 00:07:54,240 --> 00:07:57,600 ‫and also used in the wrong places. 143 00:07:57,600 --> 00:08:00,840 ‫Now, I'm not really gonna go deep into this right now, 144 00:08:00,840 --> 00:08:03,870 ‫but here are just the three biggest use cases 145 00:08:03,870 --> 00:08:06,987 ‫where effects are still being overused 146 00:08:06,987 --> 00:08:10,470 ‫and that you should avoid as a beginner. 147 00:08:10,470 --> 00:08:13,560 ‫The first one is to use an effect to respond 148 00:08:13,560 --> 00:08:17,430 ‫to a user event like a click or a keystroke. 149 00:08:17,430 --> 00:08:19,170 ‫So as we learned before, 150 00:08:19,170 --> 00:08:22,710 ‫a user event should whenever possible be handled 151 00:08:22,710 --> 00:08:26,550 ‫with an event handler function and not with an effect, 152 00:08:26,550 --> 00:08:30,600 ‫even if the handler does create a side effect. 153 00:08:30,600 --> 00:08:33,210 ‫Next, fetching data from an API 154 00:08:33,210 --> 00:08:35,250 ‫when the component first mounts 155 00:08:35,250 --> 00:08:38,223 ‫is another overused application of useEffect. 156 00:08:39,420 --> 00:08:42,780 ‫Now, we did do this all the time in this course, 157 00:08:42,780 --> 00:08:45,030 ‫but that's because we were still learning 158 00:08:45,030 --> 00:08:47,790 ‫and building really small applications. 159 00:08:47,790 --> 00:08:52,110 ‫And in fact, in smaller apps, this is completely fine, 160 00:08:52,110 --> 00:08:54,660 ‫but in a more real world application, 161 00:08:54,660 --> 00:08:57,900 ‫it's best to use a professional data fetching library 162 00:08:57,900 --> 00:09:00,060 ‫like React Query. 163 00:09:00,060 --> 00:09:03,480 ‫And finally, effects are overused a lot 164 00:09:03,480 --> 00:09:06,930 ‫to synchronize state changes with one another, 165 00:09:06,930 --> 00:09:11,400 ‫which means to use useEffect to listen for a state change 166 00:09:11,400 --> 00:09:14,220 ‫only to set another piece of state. 167 00:09:14,220 --> 00:09:15,720 ‫And the problem with this 168 00:09:15,720 --> 00:09:18,870 ‫is that it will create multiple re-renders, 169 00:09:18,870 --> 00:09:21,120 ‫which can be problematic. 170 00:09:21,120 --> 00:09:24,590 ‫Now, actually, we are gonna do just this 171 00:09:24,590 --> 00:09:27,390 ‫in the current project, but in our case, 172 00:09:27,390 --> 00:09:31,980 ‫it's just gonna be because it'll highly simplify the code, 173 00:09:31,980 --> 00:09:32,883 ‫as you will see. 174 00:09:33,720 --> 00:09:37,770 ‫So basically, all these suggestions need to be taken 175 00:09:37,770 --> 00:09:40,830 ‫with a grain of salt as always. 176 00:09:40,830 --> 00:09:44,460 ‫So really, in fact, everything is acceptable 177 00:09:44,460 --> 00:09:48,150 ‫in certain situations and in certain doses. 178 00:09:48,150 --> 00:09:49,890 ‫But generally speaking, 179 00:09:49,890 --> 00:09:52,650 ‫instead of using an effect to set state 180 00:09:52,650 --> 00:09:54,390 ‫based on another state, 181 00:09:54,390 --> 00:09:57,933 ‫you should rely on derived state and event handlers.