React Native Interview: Ask this second!

By Carlos Portela, Aug 1, 2023

In this earlier blog entry, “React Native Interview: Ask this first!”, we talked about a couple of very simple and direct questions to ask of your candidate that tend to reveal his/her depth of practical experience with React Native. The same logic would apply to React JS, but we happen to be fixated and slightly obsessed with RN… ;)

Another very direct and simple question to ask of your candidate and which could reveal his/her depth of knowledge is the following:

What exactly is the nature of the value returned by the render method of a React component class?

Or, when applicable to functional components:

What exactly is the nature of the value returned by the execution of a functional component?

I have been given all sorts of incorrect answers over the years, even from experienced developers who were not curious enough to place a call to console.log in their code or read Facebook’s documentation in details.

Some will say: “It returns a text string”

Others will say: “It returns JSX”

And yet others will say : “It returns an object,” but when pressed further they can’t describe the object’s structure, or even name it.

The correct answer is: “IT RETURNS A REACT ELEMENT”

What is a React Element?

A React Element is the structural unit of the Virtual DOM.

In other words, the Virtual DOM is a nested structure of React Element’s that mirrors the actual Document Object Model, or DOM.

And Yes, even in React Native there is a DOM.

What does a React Element look like?

Let’s dissect a React Element by way of a very simple example of a functional component that specifies a very simple JSX hierarchy:

    function MyComponent() {
        return (
            <View>
                <Text>Hello World</Text>
            </View>
        );
    }
  

The simplified version of the React Element object returned by the above functional component looks more or less like this:

    {
        props: {
            type: {
                displayName: 'View'
            },
            ref: null,
            key: null,
            children: {
                type: {
                    displayName: 'Text'
                }
                ref: null,
                key: null,
                children: 'Hello World',
                defaultProps: {
                    style: {
                        fontFamily: 'RobotoCondensed_400Regular'
                    }
                }
            },
        }
    }
 

You will be surprised to find how many developers, even experienced ones, botch this question because they do not know this information.

While not knowing this information does not make you a bad programmer, having this level of awareness makes you understand better the implication of taking one approach or another when you lay out your JSX tags.

Those who answer the question correctly tend to show a level of professional curiosity and attention to detail that may set them apart from others.

Keep this in mind the next time you interview a candidate for your projects.

To email Carlos to discuss your project's needs please click , or click here to call him directly. The number is 954-444-0800 and the email is cportela @ simple-sw.com.