Part 1
Part 2
Part 3

+10 interview questions in react

Let's go a little bit more in deep

11. What do you understand by refs in React?

Refs are a way for you to get a handle back to the component you've created

It makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function.

<Text ref={(component)=>{this.textComponent = component}} > Here is some Text</Text>

Then later in your code, you can access your text by doing:

this.textComponent

This will enable you to then invoke functions on the component in a object-oriented manner.

12. When you need refs instead of ID’s ?

But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.

• Managing focus, text selection, or media playback.
• Integrating with third-party DOM libraries.
• Triggering imperative animations.

13. When is the ref value first set?

The ref is first set after the first render(), but before componentDidMount().

14. Use ‘ref’ only if its MUST , otherwise not …why?

• It hinders in optimized working of Babel inline plugin.
• Using refs is kinda moving little away the react way of thinking which is once state changes, you re-render all the components of your UI that depend on that state. React will take care of making sure only the right bits of the DOM are updated, making the whole thing efficient. You may eventually use refs in a Jquery fashion which is not the goal.

15. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

• Events are named using camel case instead of just using the lowercase.
• Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

16. How do you create an event in React?.

class Display extends React.Component({    
    show(evt) {
        // code   
    },   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            
          <div onClick={this.show}>Click Me!</div>
        );    
    }
});

17. What are synthetic events in React?

In React, when you specify an event in JSX like we did with onClick, you are not directly dealing with regular DOM events. Instead, you are dealing with a React-specific event type known as a SyntheticEvent. Your event handlers don't get native event arguments of type MouseEvent, KeyboardEvent, etc. They always get event arguments of type SyntheticEvent that wrap your browser's native event instead.

18. Why is it that React sometimes requires a key property to be specified.

Because this is how React can handle the minimal DOM change. We should add a key to each child as well as each element inside children.

19. What are the two types of components in React

A React component can be one of two types. It can be either a function component or a class component.

• A function component is the simplest form of a React component. It is a simple function with a simple contract:

const Hello = ({ name }) => (<div>Hello, {name}!</div>);

The function component receives an object of properties which is usually named props. It returns what looks like HTML, but is really JSX.

A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

class Hello extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                Hello {props}
            </div>
        )
    }
}

18. What is the difference between a Container and a Component?

• Component is part of the React API. A Component is a class or function that describes part of a React UI.

• Container is an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

19. What is a Higher Order Component? Put an examples

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.

//it's a function that accepts ComponentToDebug and explicitly returns a Functional component 
let DebugComponent = (ComponentToDebug) => {
  return (props) => (
    <div className="debug">
      <ComponentToDebug {...props}/>
    </div>
  );
};

20. What can you do with HOC?

• Code reuse, logic and bootstrap abstraction
• Render High jacking
• State abstraction and manipulation
• Props manipulation