React JS Interview Questions and Answers Set 5

41. What is redux?

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.

42.What are the lifecycle methods going to be deprecated in react v16?

The following lifecycle methods going to be unsafe coding practices and will be more problematic with async rendering.

  • Componentwillmount()
  • Componentwillreceiveprops()
  • Componentwillupdate()

Starting with react v16.3 these methods are aliased with unsafe_ prefix, and the unprefixed version will be removed in react v17.

43. What are the three principles that redux follows?

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.

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.

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.

44.What is the lifecycle methods order in mounting?

The lifecycle methods are called in the following order when an instance of a component is being created and inserted into the dom.

  • Constructor()
  • Static getderivedstatefromprops()
  • Render()
  • Componentdidmount()

45. What do you understand by “single source of truth”?

Redux uses ‘store’ for storing the application’s entire state at one place. So all the component’s state are stored in the store and they receive updates from the store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

46. List down the components of redux.

Redux is composed of the following components:

  • Action – it’s an object that describes what happened.
  • Reducer –  it is a place to determine how the state will change.
  • Store – state/ object tree of the entire application is saved in the store.
  • View – simply displays the data provided by the store.

47.How to enable production mode in react?

You should use webpack’s defineplugin method to set node_env to production, by which it strip out things like proptype validation and extra warnings. Apart from this, if you minify the code, for example, uglify’s dead-code elimination to strip out development only code and comments, it will drastically reduce the size of your bundle.

48. How are actions defined in redux?

Actions in react must have a type property that indicates the type of action being performed. They must be defined as a string constant and you can add more properties to it as well. In redux, actions are created using the functions called action creators. Below is an example of action and action creator:

1.Function addtodo(text) {
2.Return {
3.Type: add_todo,
4.Text
5.}
6.}

49. Explain the role of reducer.

Reducers are pure functions which specify how the application’s state changes in response to an action. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

50.How events are different in react?

Handling events in react elements has some syntactic differences:

  • React event handlers are named using camelcase, rather than lowercase.
  • With jsx you pass a function as the event handler, rather than a string.