Would you pass this React.js interview question at META?

This is a React interview question that is being asked at META!
react, javascript, coding, front-end, interview, software engineering, software developer interview, react interview question, react.js, web development, web development interview, technical interview.
Code Sandbox Link
codesandbox.io...
LinkedIn
/ nateazevedo

[@rodrigorodrigues6369]

The code could be pretty much simplified by using a derived state for either left or right items, by updating one state (e.g: left items) you already know which ones aren't as part of that list. A lot of options but in general it seems to be a good explanation, good job

[@sumanmaharana7401]

Bro , don't stop.. keep making these interviews videos in regular basis. Its really helpful.

[@webdevinterviews]

Thanks my friend! I'll keep them coming.

[@billybest5276]

I would have added a flag to each of items and render the items lists values depending on the value of the flags set . Then you just need one toggle function, less state variables.

[@2gbeh]

IDEAL 👌

[@nil.4]

The way you orgenised the code was art... I tend to make a lot of messing with my components (usally because, in real world there so many errors and api). For me, I would have used tricks but thanks a lot for showing very beautiful solution.

[@webdevinterviews]

Thanks! Glad you enjoyed the video. Honestly my components are usually messy at first.

[@FiorinaEU]

If you set the entirety of the array to the left or the right side, you can just empty the checkedItems-array as the values are obsolete after being pushed to either side.

[@webdevinterviews]

Right, but the way I have it, the checkedItems array will be populated with checkedItems from both the right and left lists. Therefore, I don't want to empty out the checkedItems array because it will have items from the opposite side that should persist.

[@nil.4]

​@@webdevinterviewswhat if you push all the checked items to move-left or move-right. Just wondering....what's wrong with that

[@BenjaminFavre29]

const [leftItems, setLeftItems] = useState([]); const [rightItems, setRightItems] = useState([]); useEffect(() => { setLeftItems( [1,2,3,4].map(l => { checked: false, label: l }) ); }, []); Then you can simply move the objects around (that hold the state for each checkbox) from left to right.

[@jightwor2817]

@@BenjaminFavre29you can reduce it to one state, by adding placement key to the items and it will be even simpler. Second thought is that putting setstate to the useeffect is a bad idea.

[@CamdynRasque]

Great video! Though I will say not using an unordered / ordered list element for the lists hurt me a little inside haha, always gotta think about accessibility

[@anubhapant5227]

Thank you so much for creating such informative and insightful videos on React interviews! Your content has been incredibly helpful in preparing for interviews and has played a significant role in helping me and many others secure good job offers. Your dedication and effort are truly appreciated. Keep up the fantastic work! Sending you lots of love and gratitude from India ❤

[@webdevinterviews]

Wow! Thanks for such a nice comment. And thanks for the love from India. I hope to go to India one day.

[@anubhapant5227]

Is there any way we can connect and discuss things on tech?

[@yangshunz]

Meta doesn't ask React.js interview questions, this is misleading information.

[@michael_ibeh]

just curious, do you have any experience with Meta?

[@Firstname_]

@@michael_ibehhe’s ex meta and creator of leetcode blind 75 💀

[@VyNguyen-xl5ee]

@@michael_ibehhe's ex-Meta and the author of Blind75

[@mjohnson510]

@@michael_ibehI believe this guy is a ex Staff Engineer from META

[@rezaz7167]

That's it? only one video? Today I was searching for this video again, hoping to get more interview questions to solve. keep your progress up. I need to see more of these

[@RA-xx4mz]

Very nice. A frontend focused interviewer would have liked to see these elements displayed in using an unordered list.

[@rahul4tech]

instead of 2 independent function for move right left why not one function lets call it mover with argument left right and code inside it based on argument, and any some common code like removing of checked items. just a thought.

[@getfitwithAbhaya]

Great Explanation dude... Really nice interview question to kich the bucket. Thanks for the video. 🔥🔥🔥🔥🔥🔥

[@mayukhdevansahu5707]

It was a nice explanation though. We can do the same thing with another way. We can just simply create an array of objects, containing some values, like; value: number, isChecked: boolean, target: A or B(initially it would be A). Function left will make all checked items target to A(which is for left component). loop through all the objects and make all the checked items target to A, and function right will make all of the checked items to target B. Finally for component left and right , just filter with target A and B respectively then map through the filtered items to populate the components. That's it🤘🤘🤘

[@wahajchoudhry9659]

Yes, i did it same way.

[@viditgoel2909]

I also did it the same way but I am wondering does it affect the performance as each time when we change the checked property of any item the app will reRender as the array of objects is a state

[@mayukhdevansahu5707]

No... Multiple re-renders doesn't affect the performance of react, coz it's using virtual Dom and reconciliation for comparing nd detecting the changes in the object. Then it only applies the changes in the physical dom, doesn't refreshes the whole DOM tree. That's what makes react super fast⚡

[@viditgoel2909]

@@mayukhdevansahu5707 thanks for your explanation 👍

[@ruttvikkhollam2845]

yup did the same thing.

[@cerofrais7486]

Good video. May be the requirement was to display in same order so add a sort or maintain the order.

[@foqsi_]

Good video. You kept it entertaining with your "who did that" and "what happened here" or whatever. haha. Kept me laughing.

[@revanthreddy790]

this was so useful, subbed and liked

[@webdevinterviews]

Awesome! Thanks Revanth.

[@VyankateshJoshi-k4p]

great video we need more of these ❤

[@anchalpaswan1716]

This is helpful. Please make more such videos

[@webdevinterviews]

Awesome! I'm glad you liked it.

[@kadershaikh1704]

Great! Need more of such videos

[@prajwalmegalamani7915]

Hey we can just use the item.checked right and pass the value there?

[@GoodToCU88]

This question is quite doable. I would definitely prefer this than DS&A 😆

[@nanimys]

Wow.. such a brilliant content!!

[@vishnyo]

you should have being implement it using just a single state.

[@awekeningbro1207]

I feel like the "intersection" isn't really verbose, its more of a "diff" because you are diffing the contents of two lists

[@MitrankShah]

much much knowledgeable, thankyou!!!!!

[@sharmashubham850]

Amazing explanation! 🫶🏻

[@GamePlay-pl2nv]

well done , keep up the good job

[@k23raj2]

good question and the great answer. please do one more solution video on same question using redux .

[@dipankarmaity1591]

thank you for this type content

[@siddharthdutta2946]

Awesome Work. Just 1 small thing, when we are updating a state based on its previous value, it is better to pass a function to setState, setState(prevState => !prevState) instead of setState(!state).

[@GoodToCU88]

sometimes setState(!state) produces wrong results. Rule of thumb is do setState(prevState => !prevState) unless you know for sure setState(!state) doesn't cause error. Boolean state setState(!state) is fine.

[@sujayfarkade3289]

Great!!!! keep posting more stuff

[@webdevinterviews]

Thank you, I will

[@abhishekshankar6305]

Really liked the video but couldnt we set setCheckedItems to an empty array every time we use the move right and move left function? instead of setCheckedItems(not(checkedItems, rightCheckedItems))

[@veyselbasbaydar5665]

great explanations for every details !!!!!!!!!

[@emmanuellmiqueletti4605]

really fun exercise.

[@bakhtiyor_sulaymonov]

Thanks for the video

[@K.Huynh.]

thank for sharing

[@webdevinterviews]

Thank you for watching.

[@HaibertBuilds]

Is it acceptable to use a UI library during the interview? Like MUI? And also what about CSS in JS ? Or are these not allowed

[@emmanuelzakaryan7128]

For such a case I don’t think it would be good. You have 3-4 lines of css to make the grid look alike

[@RavindraSingh-lp9pl]

@webdevinterviews bro..please make more coding challenges interview videos. They are very helpful for getting jobs in React

[@mohitmalhotra4276]

Suggestions 1. Use context and pass items lists with setter in context value to both list (sharing state) 2. Make lists and button wrapped with memo (performance) 3. Pretty sure Meta isn’t concerned about padding in the buttons

[@onuracelik]

Thank you ! What would you say for the level of this question? junior, mid ?

[@setashifan3288]

junior

[@aryabiswas129]

amazing

[@RavindraSingh-lp9pl]

@FlowState code . I was asked this interview question recently..can you please assist me const obj = { a: { b: { c: { d: 5, e: [1,2,3,4] } } } } get(obj, 'a.b.c.d'); // 5 get(obj, 'a.c'); // null get(obj, 'a.c', 'no value'); // 'no value' get(obj, 'a.c', {}); // {} function get(o, str, defaultValue){ // Your code, it should cover all the above scenarios }

[@dgoenka1]

How would it be to use Redux / useReducer / Context Provider?

[@psykik89]

And this is the content we wanted , Thank you Nate you are posting the most helpful content on youtube Compare to others .Don’t stop posting 🫶🏻🫶🏻

[@ruru-dev07]

respect ✅✅🙌🙌

[@bipingurung7504]

Make more video about react interview coding round

[@jones3791]

Good stuff. How can i contact you to send you some real React Interview questions?

[@webdevinterviews]

Hey! Thanks! I'm glad you reached out. You can send a message on - LinkedIn - www.linkedin.com/in/nateazevedo/ Email - [e-mail] Whichever works best for you. Thanks

[@RavindraSingh-lp9pl]

@webdevInterviews -- I was recently asked below interview question- Display the bellow 2 cart items separately in the list on a screen e.g cartA = ["apples", "bananas", "grapes", "oranges", "pears", "pineapple"] cartB = ["potatoes", "beans", "carrots", "spinnach", "kale", "broccoli"] Add a button on the screen, on click of the button swap only the odd item from cart A, with odd items in cart B. Can someone give me solution for above problem please?

[@GoodToCU88]

I don't know this is what you mean to do. function handleClick () { newCartA = [...cartA]; newCartB = [...cartB]; swapOddItems(newCartA, newCartB); setCartA(newCartA); setCartB(newCartB); } function SwapOddItems(cartA, cartB) { for (let i = 1; i < cartA.length; i += 2) { if (i + 1 < cartA.length) { swap(cartA, cartB, i); } } } function swap (cartA, cartB, i) { let temp = cartA[i]; cartA[i] = cartB[i]; cartB[i] = temp; }

[@RavindraSingh-lp9pl]

@@GoodToCU88 thanks....this solves my coding interview query.

[@elmalleable]

super nice, if i may, you could use one list where of objects {number, flag}[] the value of the flag can be left or yellow or it may be right or red so you save on memory , doesnt really matter but sometimes you can think of ways of not making extra variables . absolutely make extra variables if it helps you or you like it

[@viditgoel2909]

are saying something like this const [elements, setElements] = useState([ ...items.map((item) => { return { value: item, side: "left", checked: false }; }) ]);

[@elmalleable]

@@viditgoel2909 yup. yeah this should work. You could throw it up in stackblitz and see.

[@elmalleable]

I would take the item keys rather than the whole item but this still works

[@achuachu2565]

GOT Confused a lot

[@damb133]

Hi all, preparing for first time React job interviews. do most interviews want us to create multiple components ? or usually just stick everything into a single one ?

[@webdevinterviews]

Hey, my suggestion is to get a working prototype quickly. If there's time for refactoring you can start to break things into components. Plus, while building the prototype you will start to get an idea of what should be broken into a smaller component.

[@shubhamboghara4490]

Bro, do you have discord server for this channel?

[@klirmio21]

Noob question : Why did you use HTML Entities instead of just ">" and "

[@awekeningbro1207]

because ">" and "

[@MajdAkleh]

How much time you have for this task?

[@foqsi_]

What even is "item"?

[@thip1754]

Did it in 15 min, could say I would pass haha

[@webdevinterviews]

Hmmm. Should I believe you?? Just kidding. Good job. 15 minutes is super impressive.

[@DuyNguyen-qs2cs]

your code is not good enough 😢. Better to learn more before think of Meta 😂

[@nanimys]

may I ask you, some files are .jsx and some just .js.. why not make it common?

[@omarwageeh606]

Convention is files that don't do rendering are .js not .jsx as they dont have html while files that include and render html are .jsx.

[@Randomguy48279xyz]

👍

[@azhar_malik]

Bro what if we want to maintain the seq of the items as well like 1 will always be on the top and 5 at the bottom how would we do that?

[@sycal13]

in the moveRight function, you'll use the sort method. like this setRightItems(rightItems.concat(leftCheckedItems).sort()) then just repeat the process to the leftMove function. this will sort the items in order no matter the sequence checked.

[@azhar_malik]

got it @@sycal13

[@cafelutsa_]

did bro get a job and privated his videos? 💀💀

[@webdevinterviews]

You noticed!

[@cafelutsa_]

@@webdevinterviews what a shame

[@RaZoRxan]

this is how you DON'T write react code

[@trinhnam3850]

agree !

[@SingularityLabsAI]

Meta only ask DSA + System Design questions.

[@de-ar]

Sorry we won't be hiring you for the job, unlike the demo shown at the beginning, your code does not respect the order of selection of the items. Better luck next time

[@ParthaSutradhar]

THAT'S SO COOL.

[@tiagoagm]

Nice video mate. The job position was a junior level right?