WEBVTT 1 00:00:00.160 --> 00:00:01.780 Hey everyone and welcome back. 2 00:00:01.810 --> 00:00:05.460 Today we're going to be talking about useContext hook in React native. 3 00:00:05.490 --> 00:00:09.900 The useContext Hook is a very useful tool that can help us solve a lot of problems 4 00:00:09.930 --> 00:00:12.580 related to sharing data between components. 5 00:00:12.610 --> 00:00:16.700 In this lesson we'll learn what the useContext Hook is, why it's useful, 6 00:00:16.720 --> 00:00:20.100 what problems it solves and when we should use it. 7 00:00:20.120 --> 00:00:21.540 You're now looking at my screen 8 00:00:21.570 --> 00:00:25.980 with my editor open, my simulator running, my Metro bundlers running as well. 9 00:00:26.010 --> 00:00:30.980 And we're back to the Hello World application that we set up initially so 10 00:00:31.010 --> 00:00:36.620 that I can convey to you exactly what useContext does once we start coding. 11 00:00:36.640 --> 00:00:41.380 So now let's talk a bit about what is the useContext Hook? 12 00:00:41.410 --> 00:00:46.140 Well, it's a built in hook in React native that allows us to consume a context. 13 00:00:46.170 --> 00:00:52.020 And a context is essentially a way to pass down the data through the component tree 14 00:00:52.050 --> 00:00:55.740 without having to pass props down manually at every level. 15 00:00:55.770 --> 00:01:00.940 The useContext Hook allows us to access the value of a context in any component 16 00:01:00.970 --> 00:01:05.380 that needs it without having to worry about prop drilling. 17 00:01:05.410 --> 00:01:09.340 Now you might be wondering why is this useful? 18 00:01:09.370 --> 00:01:13.020 Well, imagine you have a component tree with many levels of nesting. 19 00:01:13.050 --> 00:01:18.980 You need to pass down data to a deeply nested component without use context hook. 20 00:01:19.000 --> 00:01:21.050 You would have to pass props down through 21 00:01:21.080 --> 00:01:27.210 every intermediate component even if this components don't need the data. 22 00:01:27.240 --> 00:01:30.260 So imagine if you had 23 00:01:30.290 --> 00:01:36.980 a home screen component and inside the home screen component imagine that you 24 00:01:37.010 --> 00:01:46.180 have a book list for example, and inside this book list component you have a book. 25 00:01:46.210 --> 00:01:50.260 Imagine that this is the part, the book is the part that needs 26 00:01:50.290 --> 00:01:53.570 information and you want to pass it from the app component. 27 00:01:53.600 --> 00:01:58.290 Now you would need to pass that prop to home screen. 28 00:01:58.320 --> 00:01:59.680 Then you would need to pass it down 29 00:01:59.710 --> 00:02:04.000 to booklist and then you would need to pass it down to Book just so that you 30 00:02:04.030 --> 00:02:10.660 could use it inside books which is a lot of prop padding and it might get tedious 31 00:02:10.690 --> 00:02:14.540 to control these many props inside each of these components. 32 00:02:14.570 --> 00:02:19.380 So useContext could be helpful in this situation. 33 00:02:19.410 --> 00:02:24.980 This hook solves the problem by allowing us to access context values directly 34 00:02:25.010 --> 00:02:29.170 from any component in the tree without having to pass props down manually. 35 00:02:29.200 --> 00:02:31.610 It also makes our code more modular since 36 00:02:31.640 --> 00:02:36.100 we can create separate constants for different types of data and each 37 00:02:36.130 --> 00:02:39.500 component can choose which context it needs to consume. 38 00:02:39.530 --> 00:02:43.380 So when would you normally use useContext hook? 39 00:02:43.410 --> 00:02:46.160 Well, we would use it anytime we need 40 00:02:46.190 --> 00:02:50.220 to share data between components without having to pass props down manually. 41 00:02:50.240 --> 00:02:51.900 This could include things like user 42 00:02:51.930 --> 00:02:55.660 authentication data, theme settings or language preferences. 43 00:02:55.690 --> 00:02:58.380 So let's take a look at a common use case 44 00:02:58.410 --> 00:03:02.940 of dark versus light mode switch inside applications. 45 00:03:02.970 --> 00:03:05.020 Imagine you have an app with multiple 46 00:03:05.050 --> 00:03:10.100 screens and you want the user to be able to switch between a dark and light theme 47 00:03:10.130 --> 00:03:13.340 without the useContext hook, it might be hard to track changes 48 00:03:13.370 --> 00:03:16.610 on different screens for the light versus dark mode. 49 00:03:16.640 --> 00:03:20.780 And you might have to pass props down through multiple levels of nesting. 50 00:03:20.810 --> 00:03:27.220 So with the useContext hook we can avoid such a problem and we can start talking 51 00:03:27.250 --> 00:03:32.700 about how we could do something like this using useContext Hook. 52 00:03:32.730 --> 00:03:37.340 So here let's define a state that says 53 00:03:37.370 --> 00:03:43.100 whether we're currently using dark mode or light mode. 54 00:03:43.130 --> 00:03:45.260 So let's create a setter for this as well. 55 00:03:45.290 --> 00:03:49.020 And let's say that we're not using dark mode in the beginning. 56 00:03:49.050 --> 00:03:53.820 So now let's import useState here as well. Great. 57 00:03:53.850 --> 00:03:57.780 So our dark mode is turned off in the beginning. 58 00:03:57.810 --> 00:04:05.080 And now let's say that we have a function that toggles this theme and 59 00:04:05.560 --> 00:04:11.380 sets the dark mode to the opposite of what is currently set to. 60 00:04:11.410 --> 00:04:14.980 So if it is true, we're going to set it to false using this. 61 00:04:15.010 --> 00:04:18.020 And if it's false, then it's going to be set to true. 62 00:04:18.040 --> 00:04:18.540 Great. 63 00:04:18.570 --> 00:04:23.980 So here we have the Safe area view with hello world component inside it. 64 00:04:24.010 --> 00:04:31.040 But we actually want to somehow use this toggle theme function to make 65 00:04:31.070 --> 00:04:36.460 sure that we can switch this application from dark to light mode easily. 66 00:04:36.480 --> 00:04:41.180 So let's create a button here 67 00:04:41.210 --> 00:04:45.220 and on press of this button, I'm going to import this button here, 68 00:04:45.250 --> 00:04:51.860 and on press of this button I'm going to name it Switch Mode. 69 00:04:51.890 --> 00:04:56.900 On press, we're going to call toggle Theme Method. 70 00:04:56.920 --> 00:05:01.140 Now once we click this, our dark mode is going to be changing. 71 00:05:01.160 --> 00:05:04.660 Let's put this whole string inside a view 72 00:05:04.690 --> 00:05:13.900 container and let's import the view component here. 73 00:05:13.920 --> 00:05:16.180 Great. So now let's give this for example, 74 00:05:16.210 --> 00:05:25.220 a background color of I missed one 2. 75 00:05:25.250 --> 00:05:27.540 A dark gray background color. 76 00:05:27.570 --> 00:05:30.820 And then let's say that if 77 00:05:30.850 --> 00:05:35.540 dark mode is on, then we're going to have the gray background color. 78 00:05:35.570 --> 00:05:41.060 Otherwise our color for the background is going to be white. 79 00:05:41.090 --> 00:05:44.820 Great. So now let's talk about this switch right 80 00:05:44.850 --> 00:05:48.780 now if I click here, you're going to see that we have the dark 81 00:05:48.800 --> 00:05:54.580 background, but if I click again, we're going to get the white background right. 82 00:05:54.600 --> 00:05:57.460 And now let's talk about one thing. 83 00:05:57.480 --> 00:05:59.980 What if we had a separate component called 84 00:06:00.010 --> 00:06:04.340 Home Screen that also needed this information but we didn't really want 85 00:06:04.360 --> 00:06:09.500 to pass a prop to it because technically we could have many more screens like that. 86 00:06:09.530 --> 00:06:12.860 So if we want to not pass the value 87 00:06:12.890 --> 00:06:18.260 of the dark mode to the home screen and still understand whether we have 88 00:06:18.290 --> 00:06:22.860 a dark mode set or not, we would have to use contexts. 89 00:06:22.880 --> 00:06:25.460 Let's create a new component and let's call it Home Screen. 90 00:06:25.480 --> 00:06:27.660 So I'm going to create a new directory 91 00:06:27.690 --> 00:06:31.780 of components and I'm going to create a home screen directory here. 92 00:06:31.800 --> 00:06:36.700 And I'm going to create a new file called HomeScreen JS. 93 00:06:36.730 --> 00:06:42.220 And here I'm going to import React from React and then I'm going to define 94 00:06:42.250 --> 00:06:49.100 the home screen component and I'm going to return null 95 00:06:49.130 --> 00:06:55.260 now, so far, let's just make this an exportable component. 96 00:06:55.290 --> 00:06:57.940 So here, let's create a view container 97 00:06:57.970 --> 00:07:06.100 and inside it let's place a text and this text will say welcome to my application. 98 00:07:06.130 --> 00:07:12.900 Now let's import view and text components from React native here. 99 00:07:12.920 --> 00:07:14.100 Great. 100 00:07:14.130 --> 00:07:17.700 And then let's think about this, right? 101 00:07:17.730 --> 00:07:24.380 We want somehow to understand which mode we're using, light or a dark mode. 102 00:07:24.410 --> 00:07:29.260 So we're going to have to use useContext here. 103 00:07:29.290 --> 00:07:35.260 So this is a hook that comes from React and we can say 104 00:07:35.290 --> 00:07:42.700 constant isDarkMode is going to use the context and it is particularly going 105 00:07:42.730 --> 00:07:48.660 to use the theme context that we have not defined so far. 106 00:07:48.690 --> 00:07:53.220 So how do we use the theme context? 107 00:07:53.250 --> 00:07:55.420 Let's just create this context. 108 00:07:55.450 --> 00:08:00.120 Okay, let's create a new directory and call it contexts. 109 00:08:00.360 --> 00:08:07.220 And let's create a new file called themecontext JS. Inside here 110 00:08:07.240 --> 00:08:09.060 the only thing that we're going to do is 111 00:08:09.090 --> 00:08:16.560 import create context from React and then we're going to export this context 112 00:08:17.640 --> 00:08:23.860 called theme context and it's going to be equal to the new context. 113 00:08:23.890 --> 00:08:26.540 Great, so let's just save this 114 00:08:26.570 --> 00:08:34.060 and then what we want to do is import this context here inside our application. 115 00:08:34.080 --> 00:08:37.100 So let's just import 116 00:08:37.130 --> 00:08:43.740 theme context from our context directory themecontext JS file. 117 00:08:43.770 --> 00:08:51.380 And then let's wrap the whole application code inside the theme context provider. 118 00:08:51.410 --> 00:08:53.940 And the value of this constant is going 119 00:08:53.970 --> 00:08:58.180 to be the dark mode variable that we created here. 120 00:08:58.200 --> 00:09:02.420 So let's use this isDarkMode value. 121 00:09:02.440 --> 00:09:03.460 Great. 122 00:09:03.490 --> 00:09:06.140 And right after that, 123 00:09:06.170 --> 00:09:12.300 let's just place our home screen right below this view container. 124 00:09:12.320 --> 00:09:15.740 So let's use our home screen component. 125 00:09:15.770 --> 00:09:21.500 And here let's import the theme context from our contexts as well. 126 00:09:21.530 --> 00:09:24.860 And then what we want to do is use this 127 00:09:24.890 --> 00:09:32.260 dark mode variable inside this component to determine what kind of background color 128 00:09:32.290 --> 00:09:37.340 should be given to this particular component. 129 00:09:37.370 --> 00:09:40.540 So we can just say that we want to use 130 00:09:40.560 --> 00:09:47.500 a style here and background color should be set according to is dark mode value. 131 00:09:47.530 --> 00:09:48.900 And if it is dark mode, 132 00:09:48.930 --> 00:09:56.540 then we are going to use two two two color which is the dark gray color. 133 00:09:56.560 --> 00:10:01.660 And otherwise we want to use F color which stands for the white one. 134 00:10:01.690 --> 00:10:06.260 And now let's make sure that our text styles also changes according to this. 135 00:10:06.290 --> 00:10:10.600 So the color if the dark mode is on 136 00:10:11.760 --> 00:10:20.200 for the text should be white, otherwise it could be black. 137 00:10:20.480 --> 00:10:21.340 Okay, great. 138 00:10:21.370 --> 00:10:26.980 So now we see that there is no change because our dark mode is set to false. 139 00:10:27.010 --> 00:10:33.220 But if I were to click on the switch mode button, look at what would happen. 140 00:10:33.250 --> 00:10:38.980 Both of these components will have the same background color. 141 00:10:39.010 --> 00:10:42.980 So this is the way the context works here. 142 00:10:43.010 --> 00:10:49.620 The isDarkMode will be set to the same value as it will be inside the app 143 00:10:49.650 --> 00:10:55.460 component because we have used the context sharing of information and we have given 144 00:10:55.490 --> 00:10:58.980 the isDarkMode value to the theme context. 145 00:10:59.010 --> 00:11:05.660 And this isDarkMode value is going to be tracked through every component where 146 00:11:05.690 --> 00:11:10.260 we're going to be importing the theme context here. 147 00:11:10.290 --> 00:11:15.620 So that's all on the useContext hook. 148 00:11:15.650 --> 00:11:18.420 Hope you found this lesson useful. 149 00:11:18.450 --> 00:11:21.400 Now you know how to use useContext hook 150 00:11:21.430 --> 00:11:24.100 to share data between components in react native. 151 00:11:24.130 --> 00:11:25.180 And in this example, 152 00:11:25.210 --> 00:11:29.940 we used the useContext hook to create Dark versus Light code switch that shares 153 00:11:29.970 --> 00:11:33.380 data between the App component and the home screen component. 154 00:11:33.410 --> 00:11:39.320 You can feel free to use this concept in your upcoming projects later on if you 155 00:11:39.350 --> 00:11:43.540 do decide to actually implement Dark versus Light code switch. 156 00:11:43.570 --> 00:11:45.400 By using the useContext hook, 157 00:11:45.430 --> 00:11:50.620 we were able to avoid prop drilling and keep our code modular and easy to read. 158 00:11:50.640 --> 00:11:53.200 Thanks so much for watching and I'll see you in the next video.