ReactJS Interview questions

ReactJS is a Javascript library developed by Facebook in 2011. It’s open source and is used for developing single page web and mobile applications. It’s documentation is available on the website https://reactjs.org. It’s component driven i.e. you can create components using React which are reusable. It’s main advantage is that it’s fast and reliable and well suited to build scalable web applications.

• SEO-friendly: ReactJS is highly search engine friendly. It has bunch of packages which help you create search engine friendly URLs and tags with meta information.
• JSX: ReactJS uses JSX (Javascript XML) for creating markup or page templates. Using JSX gives more flexibility to the page content and it can be more dynamic and manipulated easily.
• React Native: It contains a native library which supports native mobile application development for android and iOS.
• Data-Binding: ReactJs uses one-way data binding and application architecture controls the flow of data via a dispatcher.
• Testability: ReactJS application is very easy to test. Its views are very easy to configure and can be treated as the application. ReactJS apps can be tested using frameworks like Enzyme and cypress.
• Performance: ReactJS uses virtual DOM where it does all the DOM manipulations which mantains a copy of the real DOM. It runs a diffing algorithm which takes a diff between the two and only updates the real DOM with areas that have changed since the last render/update cycle.

Props is shorthand for properties which contain attributes of a component (data and/or functions) and are passed from parent to child components. A state is snapshot of the datastore of the react application. It is used to update the component when some event like, timer, API call, user generated input, occurs.

Refs are used to identify and query HTML DOM elements in react. Most common use case is for animation when we want to identify an element and do some manipulations around it for animation and special effects.

React vs Angular

TOPIC	REACT	ANGULAR
1. ARCHITECTURE	Opinionated only about the view of  MVC	Follows complete MVC
2. RENDERING	Server-side as well as client side rendering	Client-side rendering
3. DOM	Uses virtual DOM	Uses shadow DOM
4. DATA BINDING	One-way data binding	Two-way data binding
5. DEBUGGING	Compile time debugging	Runtime debugging
6. AUTHOR	Facebook	Google

1. componentWillMount()
2. componentDidMount()
3. componentWillRecieveProps()
4. shouldComponentUpdate()
5. componentWillUpdate()

By using props we can share data between components. Props are passed from parent to child. If the child wants to access data or call parent functions, pass a callback from parent to child which will be called from parent with the relevant data we want to share.

Higher order components or HOC is a way of reusing component logic in react. HOC components accept a component and return another component as output. 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.

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

Redux is one of the hottest libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

1. Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
2. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data. 
3. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

1. Action – It’s an object that describes what happened.
2. Reducer –  It is a place to determine how the state will change.
3. Store – State/ Object tree of the entire application is saved in the Store.
4. View – Simply displays the data provided by the Store.