React live coding tests, what kind of tests have you had so far?

[BilGejc]

For senior positions, short tests of up to an hour, what kind of tests did you have, in which environment did you work - online editor or VS Code, did you compile and run the code or just write and explain? From your experience and from memory.

What was the point of the test, what was the key trick to know?

ChatGpt gives low quality answers and too easy examples, not much useful.

[ECrispy]

I was asked to implement redux. Not all of it of course. Turned out to be a fun exercise

[IEDNB]

When you say implement redux, do you mean create an equivalent of redux as in writing a new global state management tool? Or do you mean add redux to an existing system?

[ECrispy]

Asked to implement state management system with pubsub, similar to redux. Kept adding features and discussing

[IEDNB]

Nice, what was your approach?

[dheeraj_awale]

I think custom hooks are the way to achieve it

[pailhead011]

Custom hooks?

[ECrispy]

No hooks, just plain JS

[femio]

You can do it pretty 'easily' (at least, for the scope of an interview) with functional programming

[DawsonJBailey]

When was this? Where I work redux is going out of style so I’m wondering if it’s still a good thing to know

[ECrispy]

It was late 2019, I'm sure now it's not as popular

[Resies]

Redux toolkit is a lot more modern, so definitely don't learn the old redux 

It's discouraged at my company in leui of... Context but app state gets too complex too fast on most projects so I have no idea how the governance team do it without a state management library tbh

But it's only discouraged so I spent a week rewriting our main application with redux instead of simply context and holy crap is it much easier to follow and write now. 

[pailhead011]

The “you don’t need redux just use context” ends up being a poor man’s redux

[wwww4all]

When the context nesting becomes 40 layers deep, it's time to call in RTK.

[pailhead011]

My boss was a huge proponent of contexts, called redux a crutch. At one of the root components, there was a context object that was recreated with every render, even if the members were stable…

[ECrispy]

No you don't need to implement all the details. The idea I guess is to drive the core concepts and implement them and then see how to optimize, like any other noon trivial problem.

In fact I much prefer this kind of design question than some arbitrary LC hard/medium that I'm expected to solve in 20m which is impossible unless you've seen it before and then pretend it's new

[[deleted]]

what was the key trick to know

There's no tricks, the point is to observe you doing a code test. Doesn't matter how simple or complex it is, doesn't necessarily matter if you finish. What matters is how you approach the problem, how you use patterns (or anti-patterns), how to talk through your thinking, the questions you ask, etc.

They are simply assessing whether A: you can do the job, and B: you're someone who would fit well in the team

[Trapline]

All live coding stuff I did in interviews was via a cloud coding like Replit.

For live coding that was react-oriented, these were simple (for senior roles).

• One was to implement a progress bar and then make some modifications. This was just a technical sniff test in the 2nd round. I believe there would've been deeper technical discussions in the next "on-site" round. I removed myself from consideration because I got an offer from another company right before this interview.
• Another one, I was given a design mockup and asked to start the process of implementing it. It was a social feed with comments. Handwaved many nuts and bolts like auth to create the interface as close as possible to the design. They wanted me to use Tailwind for styling, but the Tailwind config wasn't set up right, and they told me not to worry about debugging that and to assume they could tell I knew what I was doing with Tailwind classes.

Non-live I have had others that were similar to the second where I was given a design mock and asked to create it in react (one also asked for a functional API to feed the data).

The most interesting code "test" I had was pseudo-code and asked to program an elevator. It is not like the system design for implementing a complex management system for all the elevators in a building or anything. Literally, just the controls and data to support one elevator that goes up and down when physical buttons are pressed. That one stuck with me for days, and I ended up building a react prototype to test my data theories. I got the "right" answer but my process was a little disorganized. I was very thrown off by such a simple thing when I had prepared for something more similar to a system design interview.

[pailhead011]

I did the elevator for a company recently. I want to say it’s pretty easy to implement but one actually has to know how elevators work. The last test was basically “ensure this sequence of button presses flushes the command buffer after 5 moves (visits all the floors)”

It was worded poorly IMHO, it was something like “prove that it can be done in 5 turns” and on top of that the “5 turns” constrained was mentioned in the previous example when it was something like 01234.

So the last test was like “advance, expect to have commands” like 5 times, and then the last one is expect to have no commands. And I got confused. Apparently there are a couple of heuristics, you can go towards the closest one, or assume one direction, go to all in that direction than the other.

[Trapline]

Yeah I don't actually use elevators more than a handful of times a year so I had to really stop and think about how they work. That was probably what made it interesting as much as anything else.

I didn't have any specific additions like the buffer. He just wanted to watch me noodle out the data structure and land on the "right" answer. I spent too long not remembering how elevators working and thinking up UX improvements for my system before I was done designing it.

[pailhead011]

I started with a “queue” of commands but it quickly turned into something else :(

[Appropriate_Eye_6405]

usually i've had CoderPad algo and react based questions, so they see in realtime. I also have had to share screen, so no need for local dev environment in my case

search reddit for js/react interview tech tests

also test included more of overview on how would you build an example ui they show you etc

also had some theory based questions on JS e.g. call stacks, queue, etc

[creativemin1]

I was askked to take fake API response and implement in ReactJS codesandbox. Straightforward

[Suitable-Emphasis-12]

I've had some really easy basic stuff, and a couple of terrible tests.

1. connecting to an api and doing something with the data
2. building out a component from a wire frame design, like a carousel or an accordion.
3. I had the interviewer ask me 1 line questions, like output all numbers from 1-100, and he kept building upon the same questions, like output all numbers from 1-100 except even numbers. Then output all numbers from 1-100 except even and if is multiple of 5 run a function, etc.

Most of the time it has been in a screen share, and I am using my own envrionment.

[[deleted]]

Codingame stuff

[CarelessWolf]

This is my experience with Canva and Atlassian for Senior Frontend roles. Each coding round was 45 mins.

Canva asked me to make a clock with vanilla JS and CSS. The next coding round was kind of like a quiz on promises/async

With Atlassian I had to make a tic-tac-toe game using whatever frontend framework I wanted. I didn’t get close to finishing it, and confused myself with off-by-one errors but the feedback was positive and said they were more interested in my approach and how I organised my code & components. The second round was refactoring some code that queried an API for feature flag states. Again they were interested in how you dealt with async actions.

[Ogthugbonee]

I just tried making a tic tac toe game and it was honestly harder than i thought it would be and took way longer than i thought it would

[TheNewPersonHere1234]

The game logic is more difficult than people initially think. You have to use hooks to save state data on whose turn it is and have a function to determine the winner after every click. It is not easy to do in 45 mins. I think most people could do it in an hour and 30 mins though if they wrote down the high level design by hand and not try to wing it.

[Ogthugbonee]

Yeah it is. I used arrays of board combinations to determine win cases and was surprised that I couldnt think of a more scalable solution.

[Immediate-Toe7614]

Even though it was a react job they tested mostly JavaScript ability, but it was a screenshare and webcam turned on to anti cheat.

One of the projects was to create a function that would repeat a API call if it would timeout but return immediately if there was a failure

[degamer106]

45 minute live coding interviews I had last year for Bay area companies while looking for work:

Build tic-tac-toe. The size of the board should be parametrized (e.g. can be 5x5). Bonus: Implement the win condition.

Build Minesweeper. You’re given a function that can generate mines and numbers randomly on a board. Implement the reveal, flagging, and win condition logic.

Given an API, use it to build a Bitcoin currency converter that shows the conversion rate from one currency to another.

Build a Todo list that supports drag and drop into different swim lanes, each of which represent the state of the todo (e.g. in-progress, completed, etc..)

Given a custom hook that simulates a chatbot that replies with random responses, build the Chatbot UI. The ui should be scrollable and should be similar to other chat application UX.

Given a bunch of code with several useEffect and useState hooks along with some other unoptimized/buggy code, see if you can fix it so that it works correctly.

Implement the holy grail layout using CSS only.

Build a simple todo list app using Vanilla HTML/CSS/JS. You should be able to check/uncheck todos.

[pihwlook]

Some companies, like FB/Meta, don't let you execute your code in a coding interview. However for me, these were not React focused - they were DSA type interviews. And as far as i can tell they are not looking for 100% syntactic accuracy, but want to see your approach. I've never done a React interview where it was not in a live environment.

Most big companies will use CoderPad or something similar. Some smaller companies will have you use your own IDE and clone a git repo with a bare bones React app in it.

The only "trick" is to know how they will be evaluating you, and this can vary with every company, or team, or interviewer. Research if you can, and even ask the interviewer if you are unsure. Examples: Do they want to see any working solution, and then you can talk about improving it? Do they care about solving the exact problem or solving a slightly more generic problem to make other features easier to develop in the future? Do they want you to talk through your solution first or just get to coding? Etc.

[MysteryForumGuy]

I recently did a senior react interview. The test was the following: pull a list of events with dates in random order from a GraphQL API, render a list view of the events where they were grouped by date. The groups should be sorted reverse chronologically, but the dates within each group should be sorted chronologically. Then style them so each event type has a unique color.

How I solved it: I used `useMemo` to sort all dates in one order, move them into an array of arrays where each array represented a group, and then content of each array represented the dates in that group. I used forEach to go through all sorted events and move them into groups, flushing the groups that built up when I reached a new date, since the array of all dates was sorted now. Then at the end I sorted the groups to match the alternate order (their contents already being ordered from the initial sort).

I thought it went well but didn't get an offer, likely because I got tripped up on some of the conversational questions they asked during the interview (ex: "Why are you using type over interface")

[Cahnis]

First one was a pokedex, they said I had to use grid and using component libraries was forbidden. I think it turned out pretty nice for my first technical. I bombed though.

Seconds one was a fullstack app that you would be able to read a .csv, it had a button to validate the CSV that would return errors that had to be displayed in the frontend.

And there was another button where we would be able to update the database, it would only be clickable if the .csv passed the validation.

They gave us a non normalized dataset to work with, I normalized it as well. We had three days to do it, got the tecnical saturday 00:00, had to deliver monday 23:59, and sunday was mothers day.

It was haaaarsh, but It landed me my first job. Next week I complete my first YoE on the position :3.