Custom Hooks | React Design Pattern - 5

If you’ve learned the basics of React and have worked on many React applications, chances are you’ve run into some recurring problems and situations, like creating reusable layouts or working with forms. If you’ve been on the hunt for solutions to common problems, look no further than this course with Coding With Mr.M, where I am gonna cover many of the most useful design patterns—effective and repeatable solutions to common application development challenges. This course consists of several sections, each of which will cover a group of React design patterns, ranging from the preferred syntax for specific tasks to how to arrange components in the most effective way. Among the topics, Mr.M covers are composition, higher-order components, state hoisting, controlled vs. uncontrolled components, and many other patterns that help a React app develop into a well-organized codebase.

Timestamps:
00:00 What are custom hooks
01:51 useCurrentUser Hook
07:04 useUser Hook
10:20 useResource Hook
14:57 useDataSource Hook

#react #reactjs #designpatternsinreact #layoutcomponentsinreact #adekninie #AdekNinie #codingwithmrm #hoc #customhooks #reacthooks

[tonyg_nerd]

Coding since before 1980. I watched this a couple times in the last few months. I was missing nuances and you filled them in for me. I feel more competent with React with this detail. That's a big deal for me. Thank you Very much.

[cdhit]

I felt it's a great approach using custom hook to orgnise code, modulize code.

[cdhit]

Your video is really awesome, please keep it up. You will be popular some day.

[mnz]

i have doubt in useCurrentUser hook, i can't get values from axios . ididn't understand url inside the axios get method (axios.get('/current-user'))

[mohammadakradi]

thank you for these fantastiic videos.

[yatharthsaxena]

the callback function inside the useDataSource should be wrapped in useCallback. As for every render, even if the function is not changing, it’s reference will change, and so the getDataSource function will be called every time.

[cdhit]

Also I didn't know this, UserInfo component uses the custom hook - useResource which has its internal state - resource. The state resource return back to UserInfo component as variable - user, the user is also a state in UserInfo.

Once the state resouce changed in useResouce, the state - user in UserInfo also changed which causing the UI change.

It's really cool

[cdhit]

Take useUser as an example. the userId is the second parameter of useEffect, once userId changed, useEffect will run to update the component. In useEffect, it uses setUser to change the internal state of useUser component, so the component state change, then it will run useEffect again?

So does it mean, everytime userId change, useEffect will run twice and one of them is unnessary?

[cdhit]

I added the console log and tried, it did query the API twice. The second API query is useless, and add burden to the backend service. How can avoid this?

[tomlester]

So... is this how you would implement MVVM in react?

[madhav]

Please sir 🙏, can we have some more videos? 😭😂😂