React Interview Question series

React Element

A reactelement is a light, sateless, immutable virtual representation of a DOm element
A plain old javascript object without own methods
A React element is an object representation of a DOM node.
- How to create React element
  - div - Tag name
  - attributes we want the element to have
  - Content of children of the element
```
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
```

The createElement invocation returns an object

  {
    type: 'div',
    props: {
      children: 'Login',
      id: 'login-btn'
    }
  }

When this is rendered to the DOM (using ReactDOM.render ), we'll have a new DOM node that looks like this:

<div id='login-btn'>Login</div>

React Component

Class component

A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render function).
A react component render() function returns a Dom tree of react elemetns behind the scene i.e virtual Dom

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is my class component.</div>
    );
  }
}

export default MyComponent;

Use the above component into another component

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class MyOtherComponent extends Component {
  render() {
    return (
      <div>
        <div>This is my other component.</div>
        <MyComponent />
      </div>
    );
  }
}

export default MyOtherComponent;

Function component

React’s functional components distill this down to the simplest possible profile: a function that receives properties and returns a JSX definition

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

We don't need to extend a component
We also don't need to use the render keyword.

Why do we need to extend the React.Component class in class component?

In React, by extending the React.Component class, it allows us to pass props to a user defined class/component and inherit methods from React.Component class, like the lifecycle methods (componentDidMount,componentDidUpdate,componentWillUnmount,render) and setState

So only by using class based extend, we can use the above mentioned lifecycle methods. In function state management achieved through hooks.

conclusions

From the comparisons above, we can see how functional components are written shorter and simpler, which makes it easier to read, write and test -- because they are just plain JS functions. However, the rendering time and performance in either components do not make a lot of differences.

Ramdevjourney