Context Module Pattern |Provider Pattern |React Design Pattern User Details Task |Hindi |Anuj Singl

What is Context Module Pattern |Provider Pattern |React Design Pattern User Details Task |Hindi |Anuj Singla
In this video, I have covered react design pattern topic and explained the Context Module Pattern with examples and in the end, I have given the task to complete.

⏰ Timecodes ⏰
0:00 Introduction

Github project: https://github.com/anujsingla/react_design_pattern

Task: make user details form with useContext and reducer

Related Video:
useReducer + useContext Hooks - https://youtu.be/B5oDD66v688
useReducer Hooks - https://youtu.be/zIAHXQ7wi6c

Reference:
https://reactjs.org/docs/context.html
https://reactjs.org/docs/hooks-reference.html#usecontext

Key Points:
Design Pattern

Design pattern helps us to improve the flexibility and abstractions of
the components. It provides us the ability to make code more reusable.
we are using these patterns when we are designing components for our app
or making libraries and writing code for our app.
It will help to build abstractions.
Design patterns is also described as microarchitecture, as they can be used
over and over on many different scales in the same applications.

Reference:
https://www.packtpub.com/product/react-design-patterns-and-best-practices/9781786464538


We will see multiple design patterns:

1. Context Module Pattern | Provider Pattern
2. Compound Components
3. Render props
4. Controlled components
5. State Reducer
6. Higher-order components

Context Module Pattern | Provider Pattern

The context in React is used to share data between component trees such as
authenticated users, preferred themes or many more without passing that data
as props. It solves the prop drilling problem. The provider pattern allows us
to store data in a central location e.g. react context object.
It passes data to any component that needs it directly without drilling props.
Suppose we need to pass the preferred theme in a different component.
we can use this pattern for this.

const context = React.createContext(defaultValue);
- Create context object that is used to pass down the value to a component
tree without using props.

MyContext.Provider value={objectvalue}
- All the components that are descendants of provided will re-render whenever
the value prop changes. It subscribes to the context changes.

const value = useContext(context);
- It is hook which accept a context object and returns the current context
value.


Support my channel:
https://www.buymeacoffee.com/anujsingla

(Free Courses)
React course :- https://bit.ly/3qXnSYU
Javascript course :- https://bit.ly/3qYCG9u
Typescript course :- https://bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - https://www.youtube.com/playlist?list=PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz
HTML Tutorial for Beginners to advance - https://www.youtube.com/playlist?list=PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu
NPM - https://www.youtube.com/playlist?list=PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd
Remix run React framework Tutorial in Hindi - https://www.youtube.com/playlist?list=PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW

(Social Media Links)
Twitter : https://twitter.com/singla387
Facebook page : https://bit.ly/3nZlyyx
Telegram : https://bit.ly/3nX2v8f
LinkedIn : https://bit.ly/3rIMt2A



About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, Typescript. I want to teach web development to everybody.



Key Points:


Tags :-
#react #reactdesignpattern #contextmodulepattern