DEV Community

Cover image for React.js Interview - technical submission and detailed feedback

React.js Interview - technical submission and detailed feedback

Rajesh Royal on July 25, 2022

Update: The public links are down due to the company didn't wanted to have the assignment code shared. Sorry to say but the repo cannot be public ...
Collapse
 
shinspiegel profile image
Jeferson 'Shin' Leite Borges • Edited

Your code is a little bit messy.
Use this to learn, improve the quality.

Let me add some details on this,

  • On this folder you have files using camel case and kebab case. I don't care which one is used, but be consistent.
  • This file is just an exporter. In this case, this file should follow the same rule.
  • This is a little bit over complex without returning value to the project.

There is extra stuff,
For a regular developer this is not expected, but for a senior position, this type of care is expected, in special if you are going to mentor other developers.

Collapse
 
rajeshroyal profile image
Rajesh Royal

⚫ Second Point.
The default exporter of containers is created because there can be multiple exports of containers. [ex. - HOC for error boundary, HOC for Auth Provider and etc.] That's why it have only exports. But in case of a particular page there will be only page itself to be exported.

⚫ Third Point.
I accept it looks a little bit complex for just 2 routes, I could have just added two simple routes. But keeping the scalling of routes in mind I implemented it this way so It will be more easy to add childrens to the routes anytime in future.

Your feedback is really helpfull, what idea I get from the company feedback is that I should be doing what needed and in simply ways, instead of thinking the future prespectives. [deliver what needed 😄]

Thanks @shinspiegel

Collapse
 
shinspiegel profile image
Jeferson 'Shin' Leite Borges

I was afraid that you get very pissed by my comment.
Thanks for understanding. :D

Thread Thread
 
ninjainpajama profile image
ninja in pajama

😅

Thread Thread
 
rajeshroyal profile image
Rajesh Royal • Edited

@shinspiegel hehe.. It looks like that when you start reading from top 🤣🤣

Thread Thread
 
stolengalaxy profile image
Matthew Ridley

not so sure this is right,
unforu
Image description

Thread Thread
 
stolengalaxy profile image
Matthew Ridley • Edited

thank, this is sample of work i done, rate pleaser.

py
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alvinpeter9 profile image
alvinpeter9

Thanks, I have learnt from your explanation as well

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

Yet another case of "demanding rampage" (I made up this term). Establishing the measuring stick far away from their daily work. This is such a good interview project :)

good work!

((I'd say it's actually better for you not entering a place where they have this interview process)).

Collapse
 
hnrq profile image
Henrique Ramos

Would you mind explaining why is it better not to enter such a place?

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

🤔 I'll try!

The selection process is the very first contact the candidate has with the company culture. I mean the actual culture (cause every company has the most incredible values on the paper).

  • A highly demanding selection process - solve this entire project at home, for free - will be the first clue about their culture.
  • A highly demanding selection process + demanding perfection....
  • A highly demanding selection process + demanding perfection + subjective evaluation...
Thread Thread
 
ninjainpajama profile image
ninja in pajama • Edited

Got your point man, but what other options companies do have to access a candidate. I really like when companies ask me about my projects, challenges all other things and grind in details with tech rounds of logic building.

I also do not like doing take home assignments, It should only be in practice if anyone is hiring for fresher positions.

Collapse
 
rajeshroyal profile image
Rajesh Royal • Edited

I got a 2x better opportunity than this 😀 all that happens, happens for the good.

Collapse
 
pyrsmk profile image
Aurélien Delogu • Edited

I recently passed this type of test for a company, in Ruby. It said it would take up to 4 hours but I ended taking 7 hours to complete it (the statement wasn't clear enough, and I made the test in TDD, which add more time than expected because I needed to consider what missing rule from the statement I should add or not).

Finally, they did not even took the time to make a feedback and I just had a vague explanation from the HR.

I was a bit vexed and angry, but anyway, I took that code to pass another type of test for another company: they want me to take some code and explain it live. It was really fresh in my mind and I could explain clearly all my choices. The CTO was really comprehensive and clear about the mistakes I made. Never say the least, this company hired me as a senior developer and tech lead. So, indeed, everything can be a valuable lesson!

Collapse
 
rajeshroyal profile image
Rajesh Royal

agreed.

Collapse
 
airtonix profile image
Zenobius Jiricek • Edited

You left console.log in there. I'd block your pr if you tried to push that though (infact our company has dangerjs checks that do this for us)

They called it messy because:

  • There's unnecessary use of promises.
  • you used a lot of inline anon functions

If you're going to separate the components, start putting each component in it's own folder with the styles (use CSS modules).

You used a folder called containers, but it didn't contain any data layer or network layer just the error boundary.

That's all I noticed, I'm tired and about to head off to sleep.

If this was for a junior position, I'd hire you in a flash... You have promise - technically.

But then next step is - How you take criticism... It's more important than your perceived technical prowess.

If it was for a senior position then you've a long way to go before you start getting upset that you were rejected.

Collapse
 
rajeshroyal profile image
Rajesh Royal

Thanks @airtonix It helpfull, I will try If i can optimize it.

And for consoles I personally use git pre-commit hook to block committing a code, but I didn't felt need to implement it here. But I should have removed them.

Collapse
 
rajeshroyal profile image
Rajesh Royal

@airtonix if you can point out where is unnecessary use of promises exactly that will be really helpful.

Collapse
 
krishnakantsalkar profile image
Krishnakant Salkar

For filter function runs everytimr or search methods you could use rxjs typeahead flow a very good example given here: learnrxjs.io/learn-rxjs/recipes/ty...

Rxjs can be a valuable addition to any js project

Collapse
 
rajeshroyal profile image
Rajesh Royal

Thanks @krishnakantsalkar I will definately check it out.

Collapse
 
ninjainpajama profile image
ninja in pajama

I'm glad that you at least get feedback 😄

Collapse
 
rajeshroyal profile image
Rajesh Royal

lol 😅😅

Collapse
 
pengeszikra profile image
Peter Vivo

Add debounce functionality for filter, figure out useDebuounce custom hook, this will be helpful in long term.

Collapse
 
rajeshroyal profile image
Rajesh Royal

I have added a todo for that, I was about to di it but later decided to not do it because It wasn't making any much difference. But yes still good to implement.

Collapse
 
konoplitskii profile image
Sergey

Thank a lot for article.

Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing this!

Collapse
 
rajeshroyal profile image
Rajesh Royal

Thanks @yongchanghe

Collapse
 
makranelhoucine profile image
EL HOUCINE MAKRAN

For your information

ReactJs render twice in development mode because of strict mode react component

Remove StrictMode component in index.ts then ReactJs will render only one time.

Collapse
 
topninja profile image
topninja • Edited

I can agree to use ts with their feedbacks at least.

Collapse
 
rajeshroyal profile image
Rajesh Royal

hehe 😄😄

Collapse
 
rajeshroyal profile image
Rajesh Royal

Thank you for finding it helpful I appreciate that but you can do your SEO somewhere else instead of destroying the beauty of dev platform. Hope you understand.

Collapse
 
ogranada profile image
Andres Granada

Hello, first of all, great work, many things about great coding here.
IMHO I think you have a great knowledge about typescript and the generics, that is great, but trying to make scalable you added many things that could be easier for a 2 endpoints project.
You could add some extra details, being careful creating the http instance using a singleton pattern (isolation by module is good but isolation by instance is better). API double calls could be related with the useEffect return statement (useStockListingTable.tsx have no clean function, check dev.to/ag-grid/react-18-avoiding-u...).

In general I enjoyed check your code, many react magic things, just some details. Also, no all the companies have the same criteria to work, therefore, learn from this and point to new companies that need your talent. Thanks for sharing.

Collapse
 
rajeshroyal profile image
Rajesh Royal

Thank you for reading @ogranada
The API dual call happen in only dev mode of React V18. In prod build everything is working perfect.

If you can explain a little bit about it or share some resources I would love to learn - (isolation by module is good but isolation by instance is better)

Collapse
 
makranelhoucine profile image
EL HOUCINE MAKRAN

Because of StrictMode component used in index.js/ts

If you remove it ReactJs will do only one render not twice in development also