No video :(

React JS Interview Questions ( useEffect Hook Polyfill ) - Frontend Coding Interview Experience

Подписаться 115 тыс.

Просмотров 17 тыс.

50% 1

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder....
---------------------------------------
Click here to register for ZEN Class: bit.ly/3TzllCG
Learn Full stack development in your native language from GUVI and get placed in top companies !!!
✅ 100% guaranteed placement assistance
✅ 24/7 forum support
✅ Industry expert mentorship
✅ Access to exclusive online coding platforms
💥💥NO ELIGIBILITY CRITERIA 💥💥
--------------------------------------
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question on building the Polyfill of useEffect Hook or its custom implementation will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) -
topmate.io/roa...
👤 Join the RoadsideCoder Community Discord -
/ discord
🟪 Follow me on Instagram and u will clear your interview 🤓 -
/ roadsidecoder
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
➡️ Source Code -
github.com/piy...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:13 What is useEffect Hook?
01:15 useEffect to fetch API Data
04:00 Render the data
04:35 Other useEffect uses
04:48 GUVI Sponsorship
06:13 Simple Counter Example
07:57 Empty Dependency Array
08:20 When Dependenc Array Changes
09:07 No Dependency Array
09:41 Cleanup or Unmounting
10:57 useEffect Polyfill Implementation
16:37 Testing the Custom Hook
17:43 Cleanup Implementation
20:21 More such videos
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

Опубликовано:

18 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@RoadsideCoder 8 месяцев назад

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/

@rajkumararisetty7377 6 месяцев назад

Thanks for your great work, Learned a lot from you. const useCustomEffect = (effect, deps) => { const previousDeps = useRef(null); const cleanup = useRef(null); if (!areEqual(deps, previousDeps.current)) { if (cleanup.current) { cleanup.current(); } cleanup.current = effect() || null; } previousDeps.current = deps } useCustomEffect(() => { console.log('-----side effect', counter); return () => console.log('---return effect', counter) }, [counter]); I think this is much cleaner and easier approach

@KavyaChandrasekaran Месяц назад

@RoadsideCoder Cleanup function should run before useEffect function. May be this works. export function useMyEffect(callBck, deps) { const isFirstRender = useRef(true); const prevDeps = useRef([]); const returnFunc = useRef(); if(isFirstRender.current) { isFirstRender.current = false; returnFunc.current = callBck(); } else { const depsChanged = deps? JSON.stringify(prevDeps.current) !== JSON.stringify(deps) : true; if(depsChanged) { if(typeof returnFunc.current === "function") { returnFunc.current(); } callBck(); } } prevDeps.current = deps || []; }

@YogeshYadav-rx1qw 7 месяцев назад

I think this code has one bug , if we add counter1 in dependency array it still runs 1 time because JSON.stringify(deps)!==JSON.stringify(prevDeps.current) gives true and hence effect() get called . Please check once and correct me if I am wrong .

@rahuldwivedi4758 Месяц назад

For cleanup implementation, why do you have to ‘return’ another function in customHook? Can’t we simply check if the typeof effect === ‘function’ simply execute it?

@ruhaanshWorld 8 месяцев назад

This is the content I pay my data bill for👍👍👍

@kv_ki_pia8666 2 месяца назад

If we consumed this one state is not updating in the component

@user-kv4sp2zk6c 5 месяцев назад

i am not sure if i am right , but when cleanup function is implemented , it should run before the effect runs when the deps gets changes (except for the first time) , but in the code you did cleanup runs after the effect runs !! or i am not understanding it properly, if someone wanna try it , try with useEffect instead of useCustomEffect.

@Ashish-_- 8 месяцев назад

Awesome man, thanks. I'd tried doing it myself but ran into the infinite render issue as I was using useState due to which it wasn't persistent across renders. Also, one question: You did the comparison of prevDeps vs currentDeps using JSON.parse. I think we should do a check by looping through the deps array. useEffect will execute the cb if an object is passed say { } as a dependency, even if the values in the object doesn't change, since React probably does a obj1 === obj2 check.

@user-xg9ko7fo7t 3 месяца назад

it's not working when i'm using setInterval and clearInterval in this custom Hook

@codegyaan 3 месяца назад

The way you are checking the dependency array are equal or not is not correct. If you change a reference of an object but the content remains same (simply de-structure an object in to another). Your hook will fail. As per React it should re-render the content but it won't.

@kumaramresh7905 8 месяцев назад

Hi, in custoUseEffect hook, can u explain the reason behind json.stringify for comparing old and new dependencies ?? Why can't we compare them straight away using for loop ??

@user-ci8vx2tu7j 8 месяцев назад

i think for our quick understanding he demoed using JSON.stringify(). Two compare deps/prevDeps we can try lot of option

@arkadas2634 3 месяца назад

Thanks for making this videos. I have one doubt here! In case of using setInterval the code is not working. Do we need to add more codes for it?

@MidhunDarvin625 14 дней назад

Why are you returning cleanup wrapped around a function in the case of first render? Also when is it called ?

@RoadsideCoder 13 дней назад

this is the syntax, check react docs. Its called when component is unmounted

@MidhunDarvin625 13 дней назад

@@RoadsideCoder I understand that when component is unmounted, the cleanup function returned from useEffect is called. In this case, we are using a custom hook, which returns a function. What does the function returned from a custom hook do ? Is it called on unmount ? Couldn’t find this in docs.

@madhurgarg8866 7 месяцев назад

There's one edge case which has been missed in your code. Let's say there's another button to set the count as it is (setCount(count)), for example current count is 7 it will set as 7. Ideally the effect should not be triggered because the deps has not been changed. The correction would be: if (depsChanged) { effect(); prevDeps.current = deps; //new code added }

@TheViral_fyp 8 месяцев назад

Keep going buddy.. you doing so well ❤

@pramodnaik1011 6 месяцев назад

You are providing great content for beginners. I have a request please make a full video on authentication and authorization with access token and refresh token with standard industrial practice. If user is not logged in how to prevent him from accessing other pages and when token expires how to get new token and make new request. I am looking for this content from long time didn’t get it anywhere with proper explanation. Hope you will consider my request. Thanks in advance 😁.

@Aviralsingh-yw7xx 8 месяцев назад

Can we get a mock React Interview with theory and live coding questions. That would be really helpful. Always appreciate your content.

@syedaneesahmad7760 7 месяцев назад

hey, why are you invoking the cleanup function during the firstRender? Isn't it supposed to be invoked only when component unmounts or dependency array changes? Or did I miss something! Please clarify

@RoadsideCoder 7 месяцев назад

if dependency array is empty, it will be invoked

@karthikkkutty7701 8 месяцев назад

awesome video bro. btw just needed to know the cleanup algorithm that was made const cleanup = effect() over here this effect() is just the cleanup function right? not the actual useEffect function that was supposed to be triggered. meaning even if effect persisted another parameter like cleanupfn() can be provided for this custom hook. please let me know if I have got mistaken somewhere😅

@RoadsideCoder 8 месяцев назад

effect is the callback provided to useCustomEffect

@princedewangan1346 8 месяцев назад

can you pls make video for useRef deep understating.. every time I confusion how to use where to use what is main purpose of useRef.

@sujalgupta1302 8 месяцев назад

I learnt something new today. Btw how do you come up with this type of solutions on your own? Or are we supposed to know the solution beforehand?

@RoadsideCoder 8 месяцев назад

As i showed in video, breakdown the problem into small small steps and it will become easy

@vishalvarma3014 8 месяцев назад

Hey RoadsideCoder , Nice video with goot explanation. If possible ,can you please create a in-depth video on React Fibre and reconciallation.

@RoadsideCoder 8 месяцев назад

Yes, Soon!

@KondzioTVstudio 7 месяцев назад

Great think, thanks

@saikumargatla4706 8 месяцев назад

Great video 💯💯💯

@chandansingh-sb3il 7 месяцев назад

cleanup is not working for unmounting the component

@RoadsideCoder 7 месяцев назад

I have addressed this issue in the video

@RavindraSingh-lp9pl 8 месяцев назад

Very useful video❤❤❤

@premsingh6967 7 месяцев назад

@gururajchadaga 7 месяцев назад

Nice vid, but I don't think it should be called as a polyfill, as this is not a drop in replacement to useEffect, which runs after the rendering of the component.

@RoadsideCoder 7 месяцев назад

But its good enought for interviews

@IllIIIIIIllll 8 месяцев назад

Awesome😊

@ananthadm 8 месяцев назад

Cleanup is not working as expected.

@RoadsideCoder 8 месяцев назад

whats wrong?

@sunilsarode152 7 месяцев назад

we need to remove the third condition from this if (cleanup && typeof cleanup === "function" && deps) {} and this will work.

@manojsatwase 8 месяцев назад

Make video for pollyfill usestate

@ranawaqas4080 28 дней назад

which machine do you use ?

@RoadsideCoder 27 дней назад

asus tuf laptop

@ranawaqas4080 26 дней назад

@@RoadsideCoder thanks for replying

@ranawaqas4080 26 дней назад

@@RoadsideCoder obs ?

@saikumargatla4706 8 месяцев назад

Bro can you make a video on prototype and prototypal inheritance and add it in your javascript interview series

@RoadsideCoder 8 месяцев назад

Yes, I'm working on it

@saikumargatla4706 8 месяцев назад

@@RoadsideCoder Thanks Piyush! ❤️

@ARVINDSINGH-pp3bz 8 месяцев назад

Nice try but I don't see the useCustomEffect working similar to react's useEffect. The console from your useCustomEffect gets called even before the console inside of the Counter component. Whereas in react's useEffect it works as expected.

@RoadsideCoder 8 месяцев назад

As I mentioned in video - useEffect is entirely controlled by React Fiber's Internal algorithms, So obviously you can't 100% implement it, but this is the closest you can get to it!

@ARVINDSINGH-pp3bz 8 месяцев назад

@@RoadsideCoder Thanks for the valuable content you are sharing!

@rishiraj2548 8 месяцев назад

🙏💯 Namaskar

@Sandeep-zd6dq 7 месяцев назад

customUsestate implementation video as well 😅 btw why only 69 years of goodluck 😂

@_ghostman 8 месяцев назад

I actively avoid useEffect like the plague if I can, why would someone want to implement their own? xD

@RoadsideCoder 8 месяцев назад

Would be interesting to see how your code looks like, because its unavoidable 👀

@debs1991 8 месяцев назад

When your dependancy array is empty that is when you pass as [], the effect need to be called only after the first render of the component, but it gets called earlier. This is actually MISGUIDING!

@RoadsideCoder 8 месяцев назад

As I mentioned in video - useEffect is entirely controlled by React Fiber's Internal algorithms, So obviously you can't 100% implement it, but this is the closest you can get to it!