FullStack.

Cafe - Kill Your Tech Interview

FullStack.Cafe - Kill Your Tech Interview

Q1: When rendering a list what is a key and what is it's purpose?
☆☆

Topics: React

Answer:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the
elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that
uniquely identifies a list item among its siblings.

render () {
return (
<ul>
{this.state.todoItems.map(({task, uid}) => {
return <li key={uid}>{task}</li>
})}
</ul>
)
}

Most often you would use IDs from your data as keys. When you don't have stable IDs for rendered items, you
may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can
reorder, as that would be slow.

Q2: How is React different from AngularJS (1.x)? ☆☆

Topics: React

Answer:

For example, AngularJS (1.x) approaches building an application by extending HTML markup and injecting various
constructs (e.g. Directives, Controllers, Services) at runtime. As a result, AngularJS is very opinionated about the
greater architecture of your application — these abstractions are certainly useful in some cases, but they come
at the cost of flexibility.

By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an
application’s architecture. This allows a developer an incredible amount of flexibility in choosing the architecture
they deem “best” — though it also places the responsibility of choosing (or building) those parts on the
developer.

Q3: What happens during the lifecycle of a React component? ☆☆

Topics: React

Answer:

At the highest level, React components have lifecycle events that fall into three general categories:

1. Initialization

Page 1 of 8
 FullStack.Cafe - Kill Your Tech Interview

2. State/Property Updates
3. Destruction

Q4: How would you prevent a component from rendering in React?

☆☆

Topics: React

Answer:

Return null from the render method.

Q5: What happens when you call setState ? ☆☆

Topics: React

Answer:

The state property is updated in a React component with the object passed into setState , and this is done
asynchronously. It tells React that this component and its children need to be re-rendered, but React may not do
this immediately (it may batch these state update requests for better performance).

Q6: What is Flux? ☆☆

Topics: React

Answer:

Unidrectional application flow paradigm popular a few years back in React; mostly superceded by Redux these
days.

Q7: What is JSX? ☆☆

Topics: React

Answer:

Page 2 of 8
 FullStack.Cafe - Kill Your Tech Interview

JSX is a syntax notation for JavaScript XML(XML-like syntax extension to ECMAScript). It stands for JavaScript
XML. It provides expressiveness of JavaScript along with HTML like template syntax. For example, the below text
inside h1 tag return as javascript function to the render function,

render(){
return(
<div>
<h1> Welcome to React world!!</h1>
</div>
);
}

Q8: How to create components in ReactJS? ☆☆

Topics: React

Answer:

There are two possible ways to create ReactJS Components.

1. Functional components: This is the simplest way to create ReactJS components. It accepts props as an
Object and returns ReactJS elements. We call it as “functional” because those are pure JavaScript functions.

function Greeting(props) {
return <h1> Hello, {props.message}</h1>
}

2. Class components: You can also use Es6 class to define component. The above functional component can
be written as below,

class Greeting extends React.Component {

render() {
return <h1>Hello, {this.props.message}</h1>;
}
}

Q9: What is the difference between state and props ? ☆☆

Topics: React

Answer:

Both props and state are plain JavaScript objects. While both of them hold information that influences the
output of render, they are different in their functionality with respect to component. i.e,

Props get passed to the component similar to function parameters

State is managed within the component similar to variables declared within a function.

Q10: What is the purpose of callback function as an argument of

setState ? ☆☆

Topics: React

Page 3 of 8
 FullStack.Cafe - Kill Your Tech Interview

Answer:

The callback function is invoked when setState finished and the component gets rendered. Since setState is
asynchronous the callback function is used for any post action.

Note: It is recommended to use lifecycle method rather this callback function.

setState({name: 'sudheer'}, () => console.log('The name has updated and component re-rendered'));

Q11: How to pass a parameter to an event handler or callback? ☆☆

Topics: React

Answer:

You can use an arrow function to wrap around an event handler and pass parameters:

<button onClick={() => this.handleClick(id)} />

This is equivalent to calling .bind as below,

<button onClick={this.handleClick.bind(this, id)} />

Q12: How to create refs ? ☆☆

Topics: React

Answer:

Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order
to use refs throughout the component, just assign the ref to the instance property with in constructor.

class MyComponent extends React.Component {

constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}

And:

class UserForm extends Component {

handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input

Page 4 of 8
 FullStack.Cafe - Kill Your Tech Interview

type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}

We can also use it in functional components with the help of closures.

Q13: What are Fragments? ☆☆

Topics: React

Answer:

It's common pattern in React which is used for a component to return multiple elements. Fragments let you
group a list of children without adding extra nodes to the DOM.

render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}

There is also a shorter syntax:

render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}

Q14: What are portals in React and when do we need them? ☆☆

Topics: React

Answer:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the
parent component.

Sometimes it’s useful to insert a child into a different location in the DOM:

render() {
// React does *not* create a new div. It renders the children into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
this.props.children,

Page 5 of 8
 FullStack.Cafe - Kill Your Tech Interview

domNode );
}

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you
need the child to visually “break out” of its container.

Q15: What are Stateless components? ☆☆

Topics: React

Answer:

If the behaviour is independent of its state then it can be a stateless component. You can use either a function
or a class for creating stateless components. But unless you need to use a lifecycle hook in your components,
you should go for stateless functional components.

Stateful/Container/Smart component:

class Main extends Component {

constructor() {
super()
this.state = {
books: []
}
}
render() {
<BooksList books={this.state.books} />
}
}

Stateless/Presentational/Dumb component:

const BooksList = ({books}) => {

return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}

There are a lot of benefits if you decide to use stateless functional components here; they are:

easy to write, understand, and test, and

you can avoid the this keyword altogether.

Q16: What are stateful components? ☆☆

Topics: React

Answer:

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful
component. These Stateful components are always class components and have a state that gets initialized in the
constructor.

Page 6 of 8
 FullStack.Cafe - Kill Your Tech Interview

class App extends Component {

constructor(props) {
super(props);
this.state = { count: 0 };
}

render() {
// omitted for brevity
}
}

Q17: What are the limitations of React? ☆☆

Topics: React

Answer:

Below are the list of limitations:

1. React is just a view library, not a full-blown framework

2. There is a learning curve for beginners who are new to web development.
3. Integrating React.js into a traditional MVC framework requires some additional configuration
4. The code complexity increases with inline templating and JSX.
5. Too many smaller components leading to over-engineering or boilerplate

Q18: What is Flow? ☆☆

Topics: React

Answer:

Flow is a static type checker, designed to find type errors in JavaScript programs, created by Facebook. Flow
types can express much more fine-grained distinctions than traditional type systems. For example, Flow helps
you catch errors involving null, unlike most type systems.

Q19: What is the difference between React Native and React? ☆☆

Topics: React React Native

Answer:

ReactJS is a JavaScript library, supporting both front end web and being run on the server, for building user
interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native
mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your
components, and implements ReactJS under the hood.

Q20: React Hooks: What is useState() in React? ☆☆

Topics: React

Problem:

Page 7 of 8
 FullStack.Cafe - Kill Your Tech Interview

Explain what is the use of useState(0) there:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {

setCounter(count + 1);
setMoreStuff(...);
...
};

Solution:

useState is one of build-in react hooks. useState(0) returns a tuple where the first parameter count is the
current state of the counter and setCounter is the method that will allow us to update the counter's state.

We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of
the setCount function where we can do more things; the idea with hooks is that we are able to keep our code
more functional and avoid class based components if not desired/needed.

Page 8 of 8