React Components’ Parent-Child Relationship and NodeJS Function Parameter Passing.

React lives on JS

Last night one of the developers , experienced with NodeJS — React-Eco system for a couple of years ,showed me some code he wrote following my design brief. I was a bit surprised to see he was passing data from child component to parent component without any call back function being passed in the props .

As I have been soaked into React philosophy of parent-child relationship through concept of state and ‘lift the state up’ doctrine, my first question was how he could do it — did he manage to break all ReactJS rules? ref: https://reactjs.org/docs/lifting-state-up.html

So I spent an hour to clarify the scenario for myself -what is unfolding? This note is to put that finding in writing.

Fact is any programming language in-general, there are two ways to pass parameters to functions — one is by reference and the other by value. However in JavaScript and NodeJS environment this style of passing parameters by reference is brought in automatically as soon as we use Objects or Arrays instead of simple data variables(String,integer etc ) . So in JavaScript we don’t need any special artifact like the ‘pointers’ in C ,to achieve the effect of passing parameters by reference.

Now,in ReactJS world , which is an extension of NodeJS world ,to address the question of HTML (DOM) rendering through JavaScript/ JSX functions or what is referred to as ReactJS Components, the concept of State and Parent Child components data sharing through call backs are only relevant to components when they render the data. But that does not take away the fundamental ability of functions themselves to pass data from child (function that is being called) to parent (the function that issues the call ),by reference as we normally do in JavaScript.

I felt ,it is quite useful for developers who are working in ReactJS eco system to keep this perspective in mind. It might often simplify the developer’s work as my developer colleague showed me last night.

To illustrate my point I am putting below some sample code I just made up .

Firstly the following NodeJS sample illustrate the fundamental difference between passing objects (by reference) and simple data items like String and Integers (by value) in any NodeJS function.

Running the above code gives the result:

passed in B, element29
Caught early in AA ,objectfrom C with love
modified in C ,elemnt30
modified in C ,objectfrom C with love
showed in B, element29
showed in B, objectfrom C with love
showed in A, element29
showed in A, objectfrom C with love
Caught late in AA ,objectfrom C with love,Caught late in async push

The console logs show the child C is able to modify the object data in grand parent A , but not modify a simple variable . The async function AA retains that control on its parent too.

In the following piece of code I wanted to high light how this concept of child modifying the parent data still remains valid ,in spite of using ReactJS components, as long as we are not talking about what is rendered through those components- i.e. the JSX part.

In the above gist ,the parent holds the variables object_data and simple_data. Those are passed to the child as props , when the child modifies the data they are not reflected in the JSX generated html code e.g the button label , nor they are reflected in the parent HTML ,as is expected- because none of the ReactJS parent child rules of data passing and useSate functionalities are used here.

Rendered HTML only show the initial state in both Parent or Child

But if we consider the value of those objects and variables , we can see (though the alert messages) ,that the child manages to pass the modified object to the parent but not the modified simple variable to the parent (in line with Node JS function behaviors.

Child Shows the Sate in the alert message by Child onClick

Parent shows Child has changed its variable Object value in Parent OnClick Alert message

This feature can be exploited in ReactJS components that want to keep the data in sync ,for example between components that are responsible for back end interaction e.g. through Axios and those that updates such data .