Essentials ReactJS Interview Questions

Diana Caliman -

A good interviewer would be more interested in general coding thought and practice. That’s because React is just a container for your functionality. If that functionality is bad, then it doesn’t matter how good React is, your application will suck.

 If you know a language, a framework is irrelevant.

That said, there are certain things underlying React and Redux that aren’t necessarily part of a JS developers toolkit but are critical for understanding them.

First and foremost, unidirectional data flow is the beating heart of most React/Redux applications. We have reached the point where nearly everything you read online does not have React alone.

Associated with this is the immutable data. This is a part of React’s functional programming influence. And that is a great segue into functional programming on the whole. Functional Programming is becoming the go-to paradigm for JS development. It is the new hotness.

Some of this is because of the global pendulum swing away from Object Oriented development, but in the JS world specifically, it is because JS, at its heart, is functional. As anyone with knowledge of JavaScript lore knows, it was invented in about two weeks at Netscape and was originally intended to be Scheme for the web. The scheme is a dialect of Lisp, and it was invented way back in the day.

So really, this move toward functional programming is just the JS development world rediscovering itself.

But back to React. React was heavily influenced by FP and has been defined as a slow but constant move away from the pieces that were based on OOP. If you want to get into React, you need to get into JS as a functional language. And to get back to my point about immutable data that I had forgotten until now, in FP, data is seen as a stream coming into a machine which then produces a stream of outputs. The data itself is never changed. This is often called a “pure” function, which is another keyword you should probably look up.

About mindset

If it’s someone from HR who’s interviewing you, forget code altogether. Explain what the programs accomplish — in plain English. They don’t know ‘subroutine’ from ‘TCP.’

If it’s a programmer-type, describe that, plus how (what’s the code?) the program accomplishes.

If the interview is for a position as a React.js programmer (and it’s probably a JavaScript interview at best, not React.js — no one interviews you about a single library), and it’s a technical interviewer, describe how the code works. Be prepared to explain the React.js code as well as the JavaScript that you wrote. But you probably won’t hear many, if any, questions about React.js itself — maybe how you instantiate a class in JavaScript, or some client-side OS interaction (which is a good trick).

If you’re a low-level developer (assuming that you worked on a single language for the 2 years before you started working on React.js), don’t expect anything really deep — the IE 5.5 ECMAScript interpreter makes a dead snail seem fast, but you won’t get anything about that. It’s partly at the system level and partly someone who can’t read a spec. Expect JavaScript. Lots of it. How do you access a private keyword from JavaScript, write a quick “client-side directory program,” etc. ? Know when to say “you can’t do that in JavaScript” — and be sure it can’t be done.

Some Questions

Hopefully, those will help with preparations, and you might even learn something new while studying or at least reinforcing existing knowledge.

Basic question about React:

  • Different ways of defining an Element? (ES2015 class, React.createClass, stateless function — render only)
  • What are the differences between state and props?
  • Explain component lifecycle (componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount); when is each of these functions called?
  • Everything explained on this docs page: Component Specs and Lifecycle | React
  • How to optimize React component to render it less often? (using shouldComponentUpdate to determine if any relevant data changed)
  • What are best practices? (for example why not to use getInitialState, try to find others and know how to explain them)

As we all know, React is rarely used by itself, so expect some questions about data layer, most commonly an implementation of flux:

  • What is flux? How it’s different from the more traditional MVC pattern?
  • What is your preferred flux implementation? Why? (Hopefully, your answer is Redux, as most everyone seems to be using it)
  • How does Redux data flow work? (view, action creator, reducer, view — you should know and explain responsibilities of each; also how state is represented — state tree)

Depending on what technologies the company is using, you might also want to take a look at Relay and GraphQL, although those are a bit more advanced and only vaguely related to React interview. But regardless, those have some cool concepts worth learning.

You can also expect some basic JavaScript questions and, based on the job position, even CSS and HTML. Based on current React ecosystem, I wouldn’t be surprised to see some ES2015+ questions.

Conclusion

It will also help to know if they plan to test your coding skills so you can prepare ahead by trying it yourself first, depending on how you handle these situations, i.e., how nervous you get and how do you perform when in this state.

I wouldn’t risk it by having more than a basic boilerplate prepared or even getting familiar with one of those React starter kits available online. It’s important to get this step done ASAP and get to coding, it’s very likely to have a tight deadline.

Whatever you choose as project base, you should learn how the project is structured and why things are where they are.

For the task itself, it’s very common to test the knowledge of building a simple single page app. One example would be a todo list options to add a new item, edit, delete, view details, filter by date and store all changes to the server via REST API. It’s a simple example but will put to the test knowledge of handling CRUD operations, routing, storing to the server.

Even without coding interview, this would be a great practice to really brush up on your skills and ace that interview.