title
React Context vs Redux - Who wins?

description
Is the React Conext API a good replacement for Redux? And how would you switch? Here's an example project and some reasons on why (not to) switch! ---------- Learn React (incl. Context API & Redux) from Scratch: https://acad.link/reactjs Read the full article: https://academind.com/learn/react/redux-vs-context-api/ Starting Code: https://github.com/academind/react-redux-vs-context/tree/redux Finished Code: https://github.com/academind/react-redux-vs-context/tree/context Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'React Context vs Redux - Who wins?', 'heatmap': [{'end': 119.326, 'start': 91.306, 'weight': 0.807}, {'end': 494.482, 'start': 452.484, 'weight': 1}, {'end': 833.189, 'start': 812.8, 'weight': 0.745}, {'end': 949.819, 'start': 888.163, 'weight': 0.726}, {'end': 1197.659, 'start': 1170.177, 'weight': 0.745}, {'end': 1421.13, 'start': 1381.154, 'weight': 0.946}, {'end': 1532.723, 'start': 1510.041, 'weight': 0.758}, {'end': 1595.859, 'start': 1569.574, 'weight': 0.779}, {'end': 1759.73, 'start': 1739.164, 'weight': 0.84}], 'summary': 'Compares react redux and react context api, focusing on converting a redux application to use the context api, highlighting state management, flexibility, and implementation of context api for reducing bundle size and efficient react state management.', 'chapters': [{'end': 278.818, 'segs': [{'end': 52.055, 'src': 'embed', 'start': 25.655, 'weight': 1, 'content': [{'end': 30.516, 'text': "so that you can see for yourselves if it's worth it, if you like that approach and if it's better than Redux.", 'start': 25.655, 'duration': 4.861}, {'end': 38.232, 'text': 'So here we have a little demo application link, of course, below the video.', 'start': 34.451, 'duration': 3.781}, {'end': 48.274, 'text': 'And this is a very, very, very, very simple shop, which has basically a few products here, which you can add to the cart.', 'start': 39.172, 'duration': 9.102}, {'end': 52.055, 'text': "And you'll notice a slight delay here as I do add them.", 'start': 48.794, 'duration': 3.261}], 'summary': 'Demo application showcasing a simple shop with a slight delay when adding products', 'duration': 26.4, 'max_score': 25.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw25655.jpg'}, {'end': 119.326, 'src': 'heatmap', 'start': 91.306, 'weight': 0.807, 'content': [{'end': 95.009, 'text': 'I have two routes, one for the products page and one for the cart page.', 'start': 91.306, 'duration': 3.703}, {'end': 105.559, 'text': 'If we have a look at these routes, well, essentially in a products page I render a list of products which I do get from Redux with map state to props.', 'start': 95.91, 'duration': 9.649}, {'end': 110.702, 'text': 'in the main navigation, which is a separate component,', 'start': 107.481, 'duration': 3.221}, {'end': 119.326, 'text': 'i do pass my card item number because i do show that card item number here next to my card link in the main navigation.', 'start': 110.702, 'duration': 8.624}], 'summary': 'Two routes: one for products page, one for cart page, displaying products from redux and passing cart item number.', 'duration': 28.02, 'max_score': 91.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw91306.jpg'}, {'end': 278.818, 'src': 'embed', 'start': 254.115, 'weight': 0, 'content': [{'end': 261.059, 'text': 'here i do a check for my two action cases add product to card and remove product from card.', 'start': 254.115, 'duration': 6.944}, {'end': 272.11, 'text': "and then i just update my card array here to either add an item if it isn't in there already or if it is in there already, I just update its quantity.", 'start': 261.059, 'duration': 11.051}, {'end': 273.532, 'text': 'That is essentially what I do here.', 'start': 272.25, 'duration': 1.282}, {'end': 275.214, 'text': 'And the same for removing.', 'start': 273.752, 'duration': 1.462}, {'end': 277.136, 'text': 'Feel free to go through that in detail.', 'start': 275.454, 'duration': 1.682}, {'end': 278.818, 'text': 'You do have to code after all.', 'start': 277.576, 'duration': 1.242}], 'summary': 'Code includes adding and updating items in the card array.', 'duration': 24.703, 'max_score': 254.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw254115.jpg'}], 'start': 2.349, 'title': 'Comparing react redux and react context', 'summary': 'Compares react redux and react context api, demonstrating conversion of a redux application to use the context api, with a focus on setting up redux store, managing state, and understanding core concepts of redux.', 'chapters': [{'end': 70.847, 'start': 2.349, 'title': 'React redux vs react context', 'summary': 'Discusses the comparison between using react redux and react context api, with a demonstration of converting a redux application to use the context api, showcasing a simple shop application with products and cart functionality.', 'duration': 68.498, 'highlights': ['The chapter focuses on comparing React Redux and React Context API, with a demonstration of converting a Redux application to use the Context API.', 'The demonstration showcases a simple shop application with products and cart functionality, including adding and removing products, with a simulated delay to simulate server communication.', 'The application uses Redux initially and is converted to use the Context API for users to evaluate its worth and compare it with Redux.']}, {'end': 140.597, 'start': 70.847, 'title': 'Redux setup in react app', 'summary': 'Discusses setting up a redux store in the index.js file, using redux to manage state in the app.js file, and passing state as props between components, with a focus on managing products and cart items.', 'duration': 69.75, 'highlights': ['Setting up Redux store in the index.js file to manage state - using Redux for managing products and cart items.', 'Using Redux to manage state in the app.js file, setting up router with two routes for products page and cart page.', 'Passing state as props between components, such as passing card item number to main navigation and using map state to props to render card items.']}, {'end': 278.818, 'start': 141.058, 'title': 'Understanding redux in applications', 'summary': 'Explains the core concept of redux, emphasizing the central store, actions, async code execution, and connecting components to the global redux store.', 'duration': 137.76, 'highlights': ['Redux emphasizes a central store in the application, allowing access from different parts of the app. The core concept of Redux revolves around having one central store in the application, accessible from various parts of the app.', 'Async code execution is facilitated in Redux action creators, enabling interactions with web servers or simulating API calls. Redux func setup in index.js allows asynchronous code execution in action creators, facilitating interactions with web servers or simulating API calls.', 'The process of connecting a component to the global Redux store involves utilizing mapDispatchToProps and mapStateToProps functions with the connect higher order component provided by the React Redux package. Connecting a component to the global Redux store involves using mapDispatchToProps and mapStateToProps functions with the connect higher order component from the React Redux package.', 'Reducers handle actions dispatched in the application, updating the state based on action types such as add product to cart or remove product from cart. Reducers are responsible for updating the state based on dispatched actions like adding or removing products from the cart.']}], 'duration': 276.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw2349.jpg', 'highlights': ['The chapter focuses on comparing React Redux and React Context API, with a demonstration of converting a Redux application to use the Context API.', 'Setting up Redux store in the index.js file to manage state - using Redux for managing products and cart items.', 'Redux emphasizes a central store in the application, allowing access from different parts of the app. The core concept of Redux revolves around having one central store in the application, accessible from various parts of the app.']}, {'end': 519.044, 'segs': [{'end': 356.765, 'src': 'embed', 'start': 325.579, 'weight': 0, 'content': [{'end': 330.222, 'text': 'You provide it at some point in your app, could be in your root app component,', 'start': 325.579, 'duration': 4.643}, {'end': 338.246, 'text': 'could be in another component and all child components of the component where you provide it in then have access to that context.', 'start': 330.222, 'duration': 8.024}, {'end': 341.128, 'text': 'So they have access to this JavaScript object you provide.', 'start': 338.446, 'duration': 2.682}, {'end': 349.116, 'text': 'This is kind of the idea of that central store in Redux, just a bit more flexible, because if you want to have one central context,', 'start': 342.168, 'duration': 6.948}, {'end': 356.765, 'text': 'you can do it in your root component, in your topmost component, or if you only need state in a part of your app,', 'start': 349.116, 'duration': 7.649}], 'summary': 'Context in react provides flexible access to shared data.', 'duration': 31.186, 'max_score': 325.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw325579.jpg'}, {'end': 494.482, 'src': 'heatmap', 'start': 452.484, 'weight': 1, 'content': [{'end': 454.106, 'text': 'We wanna use it in our other components.', 'start': 452.484, 'duration': 1.622}, {'end': 460.451, 'text': "So let's export this as a default by simply adding export default in front of that created context.", 'start': 454.847, 'duration': 5.604}, {'end': 462.874, 'text': 'Now we can import from that file.', 'start': 461.412, 'duration': 1.462}, {'end': 466.857, 'text': "And let's import in the app.js file where I want to provide that context.", 'start': 463.354, 'duration': 3.503}, {'end': 475.625, 'text': "Because in all child components of the app.js file, even if they're loaded via routing, I can thereafter tap into that context.", 'start': 467.137, 'duration': 8.488}, {'end': 488.037, 'text': "So in here let me import my shop context and you should import this with an uppercase starting character, because we'll use it like a component from.", 'start': 476.546, 'duration': 11.491}, {'end': 494.482, 'text': "and now let's point at that context folder and then the shop context file in there.", 'start': 488.037, 'duration': 6.445}], 'summary': 'Export context as default, import in app.js to provide context for child components.', 'duration': 41.998, 'max_score': 452.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw452484.jpg'}], 'start': 279.438, 'title': 'Redux to context api conversion', 'summary': 'Discusses converting a classic redux setup to the context api in react, aiming to reduce bundle size and provides insights into the flexibility and implementation of the context api, highlighting the process of creating a context in react.', 'chapters': [{'end': 412.392, 'start': 279.438, 'title': 'Redux to context api conversion', 'summary': 'Discusses converting a classic redux setup to the context api in react, aiming to reduce bundle size and provides insights into the flexibility and implementation of the context api, highlighting the process of creating a context in react.', 'duration': 132.954, 'highlights': ['Context API allows providing context in React, reducing bundle size and offering flexibility in managing state at different levels of the component tree. The Context API in React allows providing context at a specific point in the app, reducing bundle size, and offering flexibility in managing state at different levels of the component tree.', 'Comparison of context API with Redux and its flexibility in managing global or partial state in the application. The context API is compared to Redux as a more flexible approach to managing global or partial state in the application.', 'Process of creating a context in React using the createContext function from the React package. The process of creating a context in React is explained, utilizing the createContext function from the React package.']}, {'end': 519.044, 'start': 412.852, 'title': 'Using context in react', 'summary': 'Discusses using context in react to provide a default javascript object, importing and exporting the context, and wrapping components to access the context for better auto-completion in ide and sharing data between components.', 'duration': 106.192, 'highlights': ['Using context in React to provide a default JavaScript object The speaker recommends passing a default JavaScript object for better auto-completion in the IDE.', 'Importing and exporting the context in React The process of importing and exporting the context is explained, allowing access to the context from outside the file and in other components.', 'Wrapping components to access the context The concept of wrapping components with the context provider to enable access to the context for all the loaded components is discussed.']}], 'duration': 239.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw279438.jpg', 'highlights': ['Context API in React reduces bundle size and offers flexibility in managing state at different levels of the component tree.', 'Comparison of context API with Redux as a more flexible approach to managing global or partial state in the application.', 'Process of creating a context in React using the createContext function from the React package.', 'Using context in React to provide a default JavaScript object for better auto-completion in the IDE.', 'Importing and exporting the context in React to allow access from outside the file and in other components.', 'Wrapping components with the context provider to enable access to the context for all the loaded components.']}, {'end': 887.343, 'segs': [{'end': 568.257, 'src': 'embed', 'start': 520.227, 'weight': 0, 'content': [{'end': 521.87, 'text': 'Now, here comes the cool thing.', 'start': 520.227, 'duration': 1.643}, {'end': 523.811, 'text': 'You can now set a value here.', 'start': 522.21, 'duration': 1.601}, {'end': 529.136, 'text': 'And this is the data, the concrete data that is passed down to all these components.', 'start': 523.831, 'duration': 5.305}, {'end': 534.821, 'text': 'Now, obviously, I do set a default value here, right? I do set this default value.', 'start': 529.757, 'duration': 5.064}, {'end': 538.384, 'text': "So I wouldn't need to pass a specific value just to have that.", 'start': 535.142, 'duration': 3.242}, {'end': 543.01, 'text': "But of course, we don't want to stay at this default value.", 'start': 539.085, 'duration': 3.925}, {'end': 544.511, 'text': 'We want to change that over time.', 'start': 543.03, 'duration': 1.481}, {'end': 550.999, 'text': "And therefore here in app.js, we of course don't just have to set some static one time initial value.", 'start': 545.172, 'duration': 5.827}, {'end': 557.726, 'text': "This is the value which when we update it will be passed down to the child components and we'll update those as well.", 'start': 551.479, 'duration': 6.247}, {'end': 565.734, 'text': 'So therefore here in my app component, I can now use my internal state, the default state I can have in any class-based component.', 'start': 558.627, 'duration': 7.107}, {'end': 568.257, 'text': 'And the same would be true if you use hooks.', 'start': 566.215, 'duration': 2.042}], 'summary': 'Setting default and updating values in app components for passing down to child components.', 'duration': 48.03, 'max_score': 520.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw520227.jpg'}, {'end': 614.299, 'src': 'embed', 'start': 587.07, 'weight': 6, 'content': [{'end': 593.432, 'text': 'to just have the auto completion, because now I will initialize this here in this state in the app JS file.', 'start': 587.07, 'duration': 6.362}, {'end': 595.113, 'text': 'And in here.', 'start': 594.353, 'duration': 0.76}, {'end': 604.457, 'text': 'I also now want to add my ad product to cart method where I get the product as an argument.', 'start': 595.113, 'duration': 9.344}, {'end': 614.299, 'text': "let's say And I also want to add my remove product from cart method where I get the product ID and then do something.", 'start': 604.457, 'duration': 9.842}], 'summary': 'Initializing auto completion, adding ad product to cart method, and removing product from cart method', 'duration': 27.229, 'max_score': 587.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw587070.jpg'}, {'end': 742.916, 'src': 'embed', 'start': 710.38, 'weight': 1, 'content': [{'end': 713.423, 'text': 'And this should point at this add product to cart.', 'start': 710.38, 'duration': 3.043}, {'end': 716.655, 'text': 'So it should point at this method.', 'start': 715.134, 'duration': 1.521}, {'end': 718.877, 'text': "Important, don't execute it here.", 'start': 717.136, 'duration': 1.741}, {'end': 721.419, 'text': "You don't wanna run it immediately when this is parsed.", 'start': 719.137, 'duration': 2.282}, {'end': 730.646, 'text': 'Instead, you just wanna pass a reference so that this is executed when add product to cart is called from inside a child component,', 'start': 721.919, 'duration': 8.727}, {'end': 734.129, 'text': 'just as you would pass a reference to a onClickListener, for example.', 'start': 730.646, 'duration': 3.483}, {'end': 737.151, 'text': "Now I'll do the same for removing.", 'start': 734.809, 'duration': 2.342}, {'end': 742.916, 'text': 'So remove product from cart will point at this remove product from cart also without parentheses.', 'start': 737.391, 'duration': 5.525}], 'summary': 'Pass a reference to execute method when called from child component.', 'duration': 32.536, 'max_score': 710.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw710380.jpg'}, {'end': 833.189, 'src': 'heatmap', 'start': 759.625, 'weight': 2, 'content': [{'end': 762.747, 'text': 'So remove product from cart is added there as well.', 'start': 759.625, 'duration': 3.122}, {'end': 766.888, 'text': 'And I do get my product here though.', 'start': 764.107, 'duration': 2.781}, {'end': 775.563, 'text': 'And here I will get a product ID And with this setup added, we got our core state set up.', 'start': 766.968, 'duration': 8.595}, {'end': 781.447, 'text': "Now let's add some functionality to add product to cart and remove product from cart.", 'start': 776.384, 'duration': 5.063}, {'end': 794.014, 'text': "So for now we'll simply console log adding product and basically just output my product here and do the same for removing,", 'start': 782.387, 'duration': 11.627}, {'end': 796.395, 'text': 'so that we can see if that was triggered correctly.', 'start': 794.014, 'duration': 2.381}, {'end': 804.758, 'text': 'So removing product with ID and then here we can concatenate our product ID.', 'start': 796.895, 'duration': 7.863}, {'end': 807.959, 'text': 'So now we should be able to see these console logs.', 'start': 805.818, 'duration': 2.141}, {'end': 812.8, 'text': 'But of course, for that we now need to access that context from the child components,', 'start': 808.059, 'duration': 4.741}, {'end': 816.38, 'text': "because we're still working in the app JS and the root component only.", 'start': 812.8, 'duration': 3.58}, {'end': 822.102, 'text': "Let's start with products where we want to add our product to the cart.", 'start': 817.101, 'duration': 5.001}, {'end': 828.043, 'text': 'First of all, I will get rid of connect down there.', 'start': 823.202, 'duration': 4.841}, {'end': 832.068, 'text': "This is a React Redux thing, and we don't need it anymore.", 'start': 829.127, 'duration': 2.941}, {'end': 833.189, 'text': 'So I can get rid of that.', 'start': 832.188, 'duration': 1.001}], 'summary': 'Setting up functionality to add and remove products from cart in react redux', 'duration': 56.755, 'max_score': 759.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw759625.jpg'}], 'start': 520.227, 'title': 'React state management and context setup', 'summary': 'Covers setting and updating default values, managing state using internal state in class-based or hooks, organizing context and functions in app.js for efficient react state management, setting up context in react, passing methods and values, adding references to methods, and accessing context from child components, with a focus on adding functionality to add and remove products from the cart.', 'chapters': [{'end': 658.253, 'start': 520.227, 'title': 'React state management', 'summary': 'Explains how to set and update default values, manage state using internal state in class-based or hooks, and organize context and functions in the app.js file for efficient react state management.', 'duration': 138.026, 'highlights': ['You can set a default value and update it over time to be passed down to child components. The ability to set a default value and update it over time provides flexibility and ensures that the updated value is passed down to child components.', 'Internal state can be used in class-based components, and the same can be achieved using hooks with the useState hook. The flexibility of using internal state in class-based components and hooks such as useState allows for managing state effectively in both approaches.', 'Functions for adding and removing products from the cart are added to the app.js file, providing a clear organization of context and functions. The addition of functions for managing products in the app.js file improves the organization of context and functions, making the code more maintainable.', 'Multiple contexts can be used in different components, and wrapper components can be created to manage logic efficiently. Utilizing multiple contexts and creating wrapper components allows for efficient management of logic and prevents cluttering the app component with unnecessary code.']}, {'end': 887.343, 'start': 658.673, 'title': 'Setting up context in react', 'summary': 'Describes setting up context in react, including passing methods and values, adding references to methods, and accessing the context from child components, with a focus on adding functionality to add and remove products from the cart.', 'duration': 228.67, 'highlights': ['Setting up context and passing methods and values The speaker explains passing a JavaScript object with dynamic values, creating a JavaScript object for products and cart, and passing references to methods like add product to cart and remove product from cart.', 'Accessing the context from child components The chapter emphasizes accessing the context from child components, discussing two methods for tapping into the context and importing the shop context to utilize it within the component.', 'Adding functionality to add and remove products from the cart The speaker demonstrates adding functionality to add product to cart and remove product from cart, using console logs to verify if the actions were triggered correctly.']}], 'duration': 367.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw520227.jpg', 'highlights': ['Functions for adding and removing products from the cart are added to the app.js file, providing a clear organization of context and functions. The addition of functions for managing products in the app.js file improves the organization of context and functions, making the code more maintainable.', 'Internal state can be used in class-based components, and the same can be achieved using hooks with the useState hook. The flexibility of using internal state in class-based components and hooks such as useState allows for managing state effectively in both approaches.', 'Multiple contexts can be used in different components, and wrapper components can be created to manage logic efficiently. Utilizing multiple contexts and creating wrapper components allows for efficient management of logic and prevents cluttering the app component with unnecessary code.', 'Setting up context and passing methods and values The speaker explains passing a JavaScript object with dynamic values, creating a JavaScript object for products and cart, and passing references to methods like add product to cart and remove product from cart.', 'Accessing the context from child components The chapter emphasizes accessing the context from child components, discussing two methods for tapping into the context and importing the shop context to utilize it within the component.', 'You can set a default value and update it over time to be passed down to child components. The ability to set a default value and update it over time provides flexibility and ensures that the updated value is passed down to child components.', 'Adding functionality to add and remove products from the cart The speaker demonstrates adding functionality to add product to cart and remove product from cart, using console logs to verify if the actions were triggered correctly.']}, {'end': 1325.996, 'segs': [{'end': 949.819, 'src': 'heatmap', 'start': 888.163, 'weight': 0.726, 'content': [{'end': 893.245, 'text': 'you use your shop context and then add consumer.', 'start': 888.163, 'duration': 5.082}, {'end': 895.727, 'text': 'we had dot provider in app.js.', 'start': 893.245, 'duration': 2.482}, {'end': 898.248, 'text': 'here we can add dot consumer.', 'start': 895.727, 'duration': 2.521}, {'end': 906.992, 'text': 'we wrap our entire jsx code with that and in there we get a so-called render prop, which means we have a dynamic content in here,', 'start': 898.248, 'duration': 8.744}, {'end': 913.728, 'text': 'which will be a javascript function that should return the JSX code we want to render for this component.', 'start': 906.992, 'duration': 6.736}, {'end': 923.75, 'text': 'So what we previously had returned in our render method, we add this now here in this function we have between our curly braces like this.', 'start': 914.248, 'duration': 9.502}, {'end': 927.171, 'text': 'And there we receive context as an argument.', 'start': 924.65, 'duration': 2.521}, {'end': 932.812, 'text': 'And this refers to our object as we pass it here into the provider.', 'start': 927.391, 'duration': 5.421}, {'end': 937.213, 'text': 'So we have access to exactly this object in our products page now.', 'start': 933.252, 'duration': 3.961}, {'end': 949.819, 'text': 'And this means that there, for example, where I wanna output my card item number, I can now tap into my context,', 'start': 938.194, 'duration': 11.625}], 'summary': 'Using a render prop, we can dynamically add context to a consumer in our shop, allowing access to the object passed into the provider.', 'duration': 61.656, 'max_score': 888.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw888163.jpg'}, {'end': 990.337, 'src': 'embed', 'start': 967.918, 'weight': 1, 'content': [{'end': 975.664, 'text': 'So now what I have here is my main navigation gets the card item number, which in the end taps into the context there, into this card array,', 'start': 967.918, 'duration': 7.746}, {'end': 978.106, 'text': 'and reduces this array to a single number.', 'start': 975.664, 'duration': 2.442}, {'end': 985.192, 'text': 'that indicates how many items are in the card by adding the quantity of each item and starting with a quantity of zero, of course.', 'start': 978.106, 'duration': 7.086}, {'end': 987.474, 'text': 'Now, this is one part.', 'start': 986.353, 'duration': 1.121}, {'end': 990.337, 'text': 'We also wanna go through all our products.', 'start': 987.935, 'duration': 2.402}], 'summary': 'Main navigation calculates total items in cart by reducing array of items.', 'duration': 22.419, 'max_score': 967.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw967918.jpg'}, {'end': 1211.276, 'src': 'heatmap', 'start': 1170.177, 'weight': 0, 'content': [{'end': 1179.017, 'text': 'So if I added this here and I console.log this context, If I save that and I go to the cart component, indeed,', 'start': 1170.177, 'duration': 8.84}, {'end': 1182.94, 'text': 'here I see my context object being logged with the default products.', 'start': 1179.017, 'duration': 3.923}, {'end': 1185.663, 'text': 'So this is pretty nice.', 'start': 1183.901, 'duration': 1.762}, {'end': 1188.866, 'text': "We now don't have to use context consumer down there.", 'start': 1186.023, 'duration': 2.843}, {'end': 1197.659, 'text': 'Instead here, where I wanna get that cart item count, Well, instead of using connect here, we can get rid of that.', 'start': 1189.386, 'duration': 8.273}, {'end': 1205.389, 'text': "And therefore, instead of using map dispatch to props and that's the map state to props I can again use this,", 'start': 1198.14, 'duration': 7.249}, {'end': 1211.276, 'text': 'reduce function on my cart and use it up there and access this context.', 'start': 1205.389, 'duration': 5.887}], 'summary': 'Using context to access cart data, eliminating use of connect and map functions.', 'duration': 50.49, 'max_score': 1170.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1170177.jpg'}], 'start': 888.163, 'title': 'Using react context for state management', 'summary': 'Explains how to access and utilize react context for state management, enabling access to context objects, eliminating the need for context consumers, and utilizing context for accessing and manipulating data in components.', 'chapters': [{'end': 1137.63, 'start': 888.163, 'title': 'Using context api in react components', 'summary': 'Explains how to use the context api in react components to access and manipulate data, demonstrating how to tap into context to display card item numbers, access products, and add products to the cart, with the advantage and downside of the approach discussed.', 'duration': 249.467, 'highlights': ['Using the context API to tap into context in the product page, demonstrating how to access and manipulate data such as displaying card item numbers, accessing products, and adding products to the cart.', 'The advantage of using the approach is that it works in both class-based and functional components, while the downside is that it only gives access to the context in the render part where JSX code is rendered.', 'Explaining approach number two in the cart page, where a static property named context type is added to the class-based component to access the context, with the requirement of using React version 16.6 or higher for this method to work.']}, {'end': 1325.996, 'start': 1137.63, 'title': 'Using react context for state management', 'summary': 'Explains how to access and utilize react context for state management, enabling access to context objects, eliminating the need for context consumers, and utilizing context for accessing and manipulating data in components.', 'duration': 188.366, 'highlights': ['Accessing and utilizing React context for state management The chapter discusses the process of accessing and utilizing React context for state management, enabling access to context objects and eliminating the need for context consumers.', 'Utilizing context to access and manipulate data in components The chapter demonstrates the use of context to access and manipulate data in components, such as accessing the cart array and executing functions like remove product from cart.', 'Eliminating the need for context consumers The chapter explains how the use of React context eliminates the need for context consumers, providing a more streamlined approach to accessing context objects.']}], 'duration': 437.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw888163.jpg', 'highlights': ['Using the context API to tap into context in the product page, demonstrating how to access and manipulate data such as displaying card item numbers, accessing products, and adding products to the cart.', 'Accessing and utilizing React context for state management The chapter discusses the process of accessing and utilizing React context for state management, enabling access to context objects and eliminating the need for context consumers.', 'Utilizing context to access and manipulate data in components The chapter demonstrates the use of context to access and manipulate data in components, such as accessing the cart array and executing functions like remove product from cart.']}, {'end': 1888.437, 'segs': [{'end': 1428.974, 'src': 'heatmap', 'start': 1381.154, 'weight': 1, 'content': [{'end': 1385.837, 'text': 'Hence, I need to update the state of this component to update what I pass down with context.', 'start': 1381.154, 'duration': 4.683}, {'end': 1394.843, 'text': 'So here in add product, I call this set state and I set card here to my updated card.', 'start': 1386.838, 'duration': 8.005}, {'end': 1400.227, 'text': "I don't need to touch my products there because I don't change them here and remove product from card.", 'start': 1395.344, 'duration': 4.883}, {'end': 1400.867, 'text': "It's the same.", 'start': 1400.267, 'duration': 0.6}, {'end': 1403.589, 'text': 'I just set my card to the updated card.', 'start': 1401.207, 'duration': 2.382}, {'end': 1409.503, 'text': 'With that, I should have logic in there that works.', 'start': 1407.062, 'duration': 2.441}, {'end': 1411.524, 'text': "So let's save all files.", 'start': 1409.884, 'duration': 1.64}, {'end': 1417.228, 'text': 'If I now click add to product, I got this instant update because I removed that delay.', 'start': 1412.105, 'duration': 5.123}, {'end': 1418.028, 'text': "I'll re-add it.", 'start': 1417.308, 'duration': 0.72}, {'end': 1421.13, 'text': 'And in the cart page, we see it there as well.', 'start': 1418.608, 'duration': 2.522}, {'end': 1427.233, 'text': 'Now, if I add more gaming mouses here, we see that is grouped together and I can remove items.', 'start': 1421.47, 'duration': 5.763}, {'end': 1428.974, 'text': 'That all updates correctly.', 'start': 1427.473, 'duration': 1.501}], 'summary': 'Updating component state for product and card with instant updates and correct grouping.', 'duration': 78.863, 'max_score': 1381.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1381154.jpg'}, {'end': 1483.724, 'src': 'embed', 'start': 1454.015, 'weight': 5, 'content': [{'end': 1455.537, 'text': 'Of course, this is just some dummy code.', 'start': 1454.015, 'duration': 1.522}, {'end': 1459.101, 'text': 'In reality, you would not set a timeout.', 'start': 1456.098, 'duration': 3.003}, {'end': 1465.228, 'text': 'You would be making an HTTP request at the beginning and then update your state in the then block or anything like that.', 'start': 1459.261, 'duration': 5.967}, {'end': 1472.699, 'text': 'So let me do the same here now for for removing a product from the cart.', 'start': 1466.089, 'duration': 6.61}, {'end': 1478.141, 'text': "Let's add a function that will execute after these 700 milliseconds.", 'start': 1473.339, 'duration': 4.802}, {'end': 1483.724, 'text': "And with this tiny change, if I go back to products, now you will see it doesn't update immediately in the header.", 'start': 1478.762, 'duration': 4.962}], 'summary': 'Code simulates delay in updating product count in cart by 700 milliseconds.', 'duration': 29.709, 'max_score': 1454.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1454015.jpg'}, {'end': 1532.723, 'src': 'heatmap', 'start': 1510.041, 'weight': 0.758, 'content': [{'end': 1517.448, 'text': 'basically the same downsides would be that if you have a lot of global state, you will end up with a huge app component,', 'start': 1510.041, 'duration': 7.407}, {'end': 1525.857, 'text': 'or you create a dedicated component that holds your state and passes it down as props to the component it wraps,', 'start': 1518.67, 'duration': 7.187}, {'end': 1531.201, 'text': 'and the app component would be that wrapped component and that could then remove logic from your app component.', 'start': 1525.857, 'duration': 5.344}, {'end': 1532.723, 'text': 'Let me actually show you that.', 'start': 1531.502, 'duration': 1.221}], 'summary': 'Using a dedicated component for state management can reduce logic in the app component.', 'duration': 22.682, 'max_score': 1510.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1510041.jpg'}, {'end': 1595.859, 'src': 'heatmap', 'start': 1569.574, 'weight': 0.779, 'content': [{'end': 1574.895, 'text': 'So, whatever I pass between the opening and closing tag of the global state component when I use it,', 'start': 1569.574, 'duration': 5.321}, {'end': 1582.337, 'text': 'the interesting part is that I will now add the logic I had here in app JS for the state and these methods here.', 'start': 1574.895, 'duration': 7.442}, {'end': 1589.754, 'text': 'I will cut that from app.js and add it to the global state so that all the logic is in here.', 'start': 1584.229, 'duration': 5.525}, {'end': 1595.859, 'text': 'And I will export my global state, of course, as a default in that file.', 'start': 1590.995, 'duration': 4.864}], 'summary': 'Global state component consolidates logic from app.js for improved efficiency.', 'duration': 26.285, 'max_score': 1569.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1569574.jpg'}, {'end': 1764.757, 'src': 'heatmap', 'start': 1736.46, 'weight': 3, 'content': [{'end': 1739.164, 'text': 'And with that a lot of talking.', 'start': 1736.46, 'duration': 2.704}, {'end': 1746.093, 'text': "if I save that and the app reloads, it still works as before because we didn't change anything logically,", 'start': 1739.164, 'duration': 6.929}, {'end': 1748.436, 'text': 'just make our code a little bit easier to read.', 'start': 1746.093, 'duration': 2.343}, {'end': 1756.605, 'text': 'So should you always use the context API then? Well, on the first look, it might look like an obvious answer.', 'start': 1749.197, 'duration': 7.408}, {'end': 1757.667, 'text': 'Sure, you should.', 'start': 1756.825, 'duration': 0.842}, {'end': 1759.73, 'text': "It's relatively easy to use.", 'start': 1757.847, 'duration': 1.883}, {'end': 1764.757, 'text': 'It saves you the extra dependency and therefore probably also shrinks your bundle size.', 'start': 1760.03, 'duration': 4.727}], 'summary': 'Using the context api can make code easier to read, save on dependencies, and likely reduce bundle size.', 'duration': 28.297, 'max_score': 1736.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1736460.jpg'}, {'end': 1888.437, 'src': 'embed', 'start': 1867.512, 'weight': 0, 'content': [{'end': 1872.173, 'text': 'because the context API is really just not built as a replacement for Redux.', 'start': 1867.512, 'duration': 4.661}, {'end': 1873.794, 'text': "That's not its core idea.", 'start': 1872.193, 'duration': 1.601}, {'end': 1882.896, 'text': "That is not the reason why it was added to react, and therefore don't use it for this, but consider it for the use cases I mentioned before,", 'start': 1873.854, 'duration': 9.042}, {'end': 1888.437, 'text': "mostly low frequency updates, and there it's great to use and definitely a great replacement for Redux.", 'start': 1882.896, 'duration': 5.541}], 'summary': 'Context api not a replacement for redux, consider for low frequency updates, a great replacement for redux.', 'duration': 20.925, 'max_score': 1867.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1867512.jpg'}], 'start': 1326.597, 'title': 'State management in app.js', 'summary': 'Demonstrates updating the state in app.js by pushing products, setting quantity, and managing data through context. it also discusses replacing redux with the context api, demonstrating state management, timeout implementation, and pros/cons of using context api for high frequency updates.', 'chapters': [{'end': 1375.289, 'start': 1326.597, 'title': 'Updating state in app.js', 'summary': 'Demonstrates updating the state in app.js by pushing products, setting quantity, increasing quantity for existing items, and managing data through context.', 'duration': 48.692, 'highlights': ['The chapter demonstrates updating the state in app.js by pushing products and setting the quantity.', 'It also covers increasing the quantity for existing items in the cart.', 'The transcript explains the process of managing data through context in app.js.']}, {'end': 1888.437, 'start': 1375.729, 'title': 'Context api as redux replacement', 'summary': 'Discusses replacing redux with the context api, demonstrating state management, timeout implementation, and pros/cons of using context api for high frequency updates.', 'duration': 512.708, 'highlights': ['The chapter walks through replacing Redux with the context API, demonstrating how to manage state and update it using the context object, showing a reduction in dependencies and cleaner code.', 'It also demonstrates implementing a timeout using set timeout for delayed state updates, giving an example of handling high frequency changes and the impact of using the context API for such updates.', 'It highlights the advice to use the context API for low frequency updates and consider it as a replacement for Redux in such cases, but warns against using it for high frequency updates, recommending sticking to Redux for those scenarios.']}], 'duration': 561.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OvM4hIxrqAw/pics/OvM4hIxrqAw1326597.jpg', 'highlights': ['The chapter demonstrates updating the state in app.js by pushing products and setting the quantity.', 'The chapter walks through replacing Redux with the context API, demonstrating how to manage state and update it using the context object, showing a reduction in dependencies and cleaner code.', 'It also covers increasing the quantity for existing items in the cart.', 'The transcript explains the process of managing data through context in app.js.', 'It also demonstrates implementing a timeout using set timeout for delayed state updates, giving an example of handling high frequency changes and the impact of using the context API for such updates.', 'It highlights the advice to use the context API for low frequency updates and consider it as a replacement for Redux in such cases, but warns against using it for high frequency updates, recommending sticking to Redux for those scenarios.']}], 'highlights': ['The chapter walks through replacing Redux with the context API, demonstrating how to manage state and update it using the context object, showing a reduction in dependencies and cleaner code.', 'Context API in React reduces bundle size and offers flexibility in managing state at different levels of the component tree.', 'The chapter focuses on comparing React Redux and React Context API, with a demonstration of converting a Redux application to use the Context API.', 'Setting up Redux store in the index.js file to manage state - using Redux for managing products and cart items.', 'Accessing and utilizing React context for state management The chapter discusses the process of accessing and utilizing React context for state management, enabling access to context objects and eliminating the need for context consumers.', 'Internal state can be used in class-based components, and the same can be achieved using hooks with the useState hook. The flexibility of using internal state in class-based components and hooks such as useState allows for managing state effectively in both approaches.', 'The chapter demonstrates updating the state in app.js by pushing products and setting the quantity.', 'Utilizing context to access and manipulate data in components The chapter demonstrates the use of context to access and manipulate data in components, such as accessing the cart array and executing functions like remove product from cart.', 'Multiple contexts can be used in different components, and wrapper components can be created to manage logic efficiently. Utilizing multiple contexts and creating wrapper components allows for efficient management of logic and prevents cluttering the app component with unnecessary code.', 'Adding functionality to add and remove products from the cart The speaker demonstrates adding functionality to add product to cart and remove product from cart, using console logs to verify if the actions were triggered correctly.']}