19

I was trying to understand the React through the React library, but couldn't understand what context and updater is, which is passed in to the Component.

Following was the code in the library. 

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

What is the purpose of these things?

halfer
  • 19,824
  • 17
  • 99
  • 186
Ishan Patel
  • 5,571
  • 12
  • 47
  • 68
  • 1
    Have you looked at the `ReactNoopUpdateQueue` or any other objects in React's code base that have methods of a similar name? They might answer some of your questions :-) – Sean Vieira Jan 05 '18 at 04:02
  • Hi @SeanVieira, Thanks for the help, I couldn't understand from that file too, if you get some time, could you please give brief summary about it? Thank you. – Ishan Patel Jan 07 '18 at 20:03

1 Answers1

19

Context

Context was introduced to enable developers to pass props to components directly, rather than via the properties of every intermediary component by way of prop drilling (which can become overly cumbersome relatively quickly).

In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful “context” API.

Updater

updater is an object containing methods used to update the DOM.

This is evident in lines 61 and 79.

// Line 61: Enqueue setState.
this.updater.enqueueSetState(this, partialState, callback, 'setState') 

// Line 79: Force Update.
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate')

These methods are triggered using setState() and forceUpdate() respectively.

Arman Charan
  • 5,669
  • 2
  • 22
  • 32
  • Awesome thank you @ArmanCharan. Can you please give example for the following case: `In some cases, you want to pass data through the component tree without having to pass the props down manually at every level. You can do this directly in React with the powerful “context” API.` – Ishan Patel Jan 08 '18 at 02:37
  • I don't think I could explain it any better than [the official docs](https://reactjs.org/docs/context.html#how-to-use-context). I can defs clarify any questions you might have pertaining to them. – Arman Charan Jan 08 '18 at 03:02