React Native Mock Interview | Interview Questions for Senior React Native Developers
Summary
TLDRIn this episode of the Touring Mock Interview series, Tech Lead Jose interviews a React Native developer, exploring their expertise in JavaScript and React Native. The interviewee shares their educational background, professional experience, and details of their work on various React Native projects. They delve into topics like the difference between props and state, higher-order components, custom hooks, and debugging techniques. The conversation also touches on the use of Flexbox in React Native and the challenges of building TV applications with React Native. The session concludes with a reminder to subscribe for more valuable content and job opportunities on Touring.com.
Takeaways
- 😀 The video is part of a mock interview series focused on interviewing for a React Native developer role.
- 🔍 The interviewer, Jose, is a tech leader at Touring with over 17 years of experience, emphasizing the vetting process for hiring engineers.
- 🎓 The interviewee has a background in computer science, with experience in various technologies including JavaScript, React, Angular, Node.js, and React Native.
- 🛠️ The interviewee has worked on numerous React Native applications, including real-time communication, streaming, geolocation, and social media features.
- 📚 The interview covers basic React Native concepts such as the difference between props and state, container components, and component-driven development (CDD).
- 🔬 The script discusses the importance of testing in CDD and the similarities between CDD and atomic design in creating reusable UI components.
- 🌐 Flexbox is highlighted as a key layout tool in React Native, with some differences from its use in web CSS.
- 🔄 Higher-order components (HOCs) and higher-order functions are explained, with examples of how they are used to extend component functionality.
- 🔧 Custom hooks in React Native are discussed, including their creation and use for state management and UI logic.
- 🔍 The use of refs in React Native is explained, emphasizing their utility for direct manipulation of variables without triggering re-renders.
- 🚀 The video concludes with advice on finding jobs on Touring.com and encourages viewers to engage with the content by liking, commenting, and subscribing.
Q & A
What is the purpose of the 'touring mock interview series'?
-The purpose of the 'touring mock interview series' is to demonstrate the interview process and to give candidates an idea of the types of questions they might face in a real interview for a React Native developer role.
What is Jose's role in the interview?
-Jose is a tech leader at touring and he is conducting the interview with the candidate, Musaian, for the role of an experienced React Native developer.
What is the difference between 'props' and 'state' in React?
-In React, 'state' is used to control the components and store variable data that can change over time, making it mutable. 'Props', on the other hand, are used to pass data to different components and are immutable, meaning their values cannot be changed by the component that receives them.
How can you update the 'props' in a React component?
-Props cannot be directly changed by the component that receives them. To update the props, you need to pass new values through the parent component that owns the current component.
What are 'container components' in React?
-Container components in React are components that have access to the store, can make API calls, and contain the app's business logic. They are responsible for passing down the necessary data and behavior to presentation components through props.
What is 'Component Driven Development (CDD)' and how does it benefit the development process?
-Component Driven Development (CDD) is a development methodology that focuses on building the UI from the bottom up, starting with individual components and ending with full pages or screens. Benefits include faster development, increased UI coverage, targeted feedback, building up a component library, and easier testing.
How is 'Component Driven Development' similar to 'Atomic Design'?
-Component Driven Development is similar to Atomic Design in that both methodologies start by creating smaller components and then combining them to form larger components, which eventually make up the UI of an application.
What is the best practice for testing in Component Driven Development?
-The best practice for testing in Component Driven Development involves using a testing framework to write test cases for individual components, executing those test cases, and verifying that the output matches expected results.
Can you explain the use of 'Flexbox' in React Native?
-Flexbox in React Native is used to create layouts that are consistent across different screen sizes. It works similarly to Flexbox in CSS with some differences in default values, such as 'flexDirection' defaulting to 'column' and 'alignItems' defaulting to 'flex-start'. Flexbox allows developers to control layout with properties like 'flexDirection', 'alignItems', and 'justifyContent'.
What is a 'Higher-Order Component (HOC)' in React?
-A Higher-Order Component in React is a function that takes a component and returns a new component. It is used for code reuse, where the new component enhances the functionality of the original component without modifying its implementation.
How can custom hooks be used with React Native?
-Custom hooks in React Native can be used to encapsulate and reuse stateful logic across different components. They are created using the 'use' prefix, such as 'useState' or 'useEffect', and provide a way to abstract complex logic into reusable functions.
What is 'useRef' and how is it different from state variables in React?
-'useRef' is a hook in React that allows you to create a reference to a value in the DOM or to a piece of state. Unlike state variables, 'useRef' does not cause a component to re-render when the referenced value changes, making it useful for storing values that do not need to trigger a re-render.
How can screen navigation functionality be implemented in React Native?
-Screen navigation in React Native is typically managed by a navigator, which handles the presentation and transition between multiple screens. Libraries like 'react-navigation' provide easy-to-use navigation solutions for common patterns like stack navigation and tab navigation.
What is the 'Reactive Virtual DOM' and how does it work in React Native?
-The Reactive Virtual DOM in React Native is a virtual representation of the actual DOM in memory. It is used to optimize updates to the UI by only updating the components that have changed, rather than re-rendering the entire UI. This is achieved through a process called 'reconciliation', which compares the current virtual DOM with an updated version and applies changes using a diffing algorithm.
Can React Native be used to build applications for TV devices?
-Technically, React Native can be used to build applications for TV devices, but the community support and documentation for this purpose are not as robust. While there have been efforts to make existing React Native applications work on Apple TV and Android TV with minimal changes, there are still challenges and a lack of widespread adoption for this use case.
How can you check if a React Native app is in debug mode or a release build?
-In React Native, you can check if the app is in debug mode by using the environment variable '__DEV__'. If the value of '__DEV__' is true, the app is in debug mode; if false, it is in a release build.
What is the best way to debug a React Native application?
-The best way to debug a React Native application is by using the Chrome Debugger. You can access it by shaking the device or pressing 'cmd+D' on the keyboard to open the developer menu. Once connected, you can debug the JavaScript code and inspect the UI through the Chrome browser.
Outlines
😀 Introduction to the Interview Series
The script introduces a mock interview series with Jose, a tech leader from Montreal, Canada, who discusses his role in hiring engineers. The interviewee, a React Native developer, shares their background in computer science and experience with various technologies. The conversation aims to demonstrate the interview process and what to expect, highlighting the developer's skills in JavaScript, React, Angular, Node.js, and mobile development with Swift and Kotlin.
🛠️ Technical Discussion on React Native Projects
In this paragraph, the interviewee delves into their experience with React Native, discussing the development of 15 to 20 applications and the creation of recognizable modules. They cover real-time communication, streaming, geolocation integration, social media features, and payment solutions like Stripe. The focus is on the breadth of their technical expertise and the variety of projects they have worked on.
📚 Exploring React Native Concepts and Best Practices
The conversation shifts to foundational React Native concepts, including the differences between props and state, container and smart components, and component-driven development (CDD). The interviewee explains the importance of testing in CDD and touches on the similarities between CDD and atomic design. Flexbox in React Native is also discussed, with the interviewee highlighting its role in creating consistent layouts across different screen sizes.
🔄 Advanced React Native Topics and Navigation
The interviewee discusses higher-order components (HOCs) and custom hooks in React Native, emphasizing their importance in managing state and side effects efficiently. The use of 'useRef' for direct manipulation of variables without triggering re-renders is also covered. The paragraph concludes with an explanation of screen navigation in React Native, mentioning the use of navigators and the 'react-navigation' library for managing multiple screens.
🎉 Reflecting on the Interview and React Native's Capabilities
Jose encourages developers with experience to apply for jobs on touring.com, highlighting the benefits of remote work. The script then returns to the technical interview, discussing the Virtual DOM in React Native and its efficiency in updating the UI. The interviewee also addresses the possibility of using React Native for TV applications, noting the lack of community support and documentation for this use case.
🛠️ Debugging Techniques and Wrapping Up the Interview
The final part of the script covers methods for checking if a React Native app is in debug mode, using environment variables. Debugging techniques, including the use of Chrome Debugger for inspecting both UI and JavaScript, are discussed. The interview concludes with a reflection on the shared knowledge and an invitation for viewers to engage with the content, subscribe to the channel, and follow on social media for more interviews and developer insights.
Mindmap
Keywords
💡Mock Interview
💡React Native
💡Props and State
💡Container Components
💡Component Driven Development (CDD)
💡Atomic Design
💡Flexbox
💡Higher-Order Components (HOC)
💡Custom Hooks
💡Refs
💡Screen Navigation
💡Virtual DOM
💡Debugging
Highlights
Jose introduces the mock interview series focusing on React Native development.
The interviewee, a React Native developer, shares their educational background and professional experience.
Developer discusses their experience with JavaScript technologies and React Native applications.
The importance of understanding the difference between props and state in React components is highlighted.
Explanation of container components and their role in handling business logic and API calls in React.
Introduction to Component Driven Development (CDD) and its benefits in UI development.
Comparison between CDD and Atomic Design in creating reusable UI components.
Best practices for testing in a component-driven development environment.
Flexbox usage in React Native for consistent layouts across different screen sizes.
Understanding higher-order components (HOC) and their function in React.
Custom hooks in React Native and their role in managing state and side effects.
The use of useRef for direct manipulation of variables without triggering re-renders.
Screen navigation implementation in React Native using navigators.
The concept of the Reactive Virtual DOM in React Native and its efficiency in updating the UI.
React Native's potential for building applications for TV devices despite limited community support.
Checking if a React Native app is in debug or release mode using environment variables.
Debugging techniques for React Native apps, including the use of Chrome Debugger.
Jose encourages developers to apply for jobs on Touring.com and engage with the community.
Closing remarks and call to action for feedback for future episodes of the mock interview series.
Transcripts
[Music]
[Music]
hello everyone we are back with another
round of touring mock interview series
i'm jose and i'm tech leader touring and
i'm from montreal canada and here i work
hiring the best engineer by helping them
with the vetting process i have more
than 17 years of experience in my
expertise rising javascript today i will
be interviewing musician for the role of
an experienced react native developer
and i hope this turned out a great great
great experience for you and just a
quick reminder this interview this
question is for you to purpose is to
demonstrate how the process is and if
you go to an interview uh you might get
some different questions a few different
questions sounds good
all right so let's hear a little bit
from you asian so first of all how are
you doing and how your day doing so far
thank you so much josie uh i'm doing
great well
thank you so much for the introduction
cool man so um let's get start this
interview okay i would like to ask you
to introduce yourself uh and tell me a
little bit about your background okay
your professional experience
and then i'll take from there sounds
good
pakistan uh i done my graduation in
computer science from one of top renewal
university of pakistan
also
i took various courses from harvard and
microsoft through online platforms
after graduate graduation i joined a
software house locally as a software
engineer
where i start with javascript
technologies including rect angular view
for web
and and for the backend uh node.js and
for hybrid applications uh we use reg
native and also i don't develop in
native ios using swift and native
android using cortex uh i worked there
for almost 2.5 years after that i
switched to the online freelancing
platform where i mainly focus on
javascript technology as technologies
has a full stack developer and on a top
rated field back there after uh i joined
after i joined a touring and now i'm
currently with one of healthcare
organization
through during
great that's great uh all right so
okay miss so
uh could you please tell me okay um a
little bit more about some interesting
project that you have be working with uh
react native okay let's focus on react
natives because i check at your
background okay if you are if i'm going
to talk to you about everything this
interview will take days okay but let's
focus on react native could you please
tell me a little bit about some
interesting project that you have been
work on
yeah sure uh if i talk about a
particularly native i develop almost 15
to 20 plus application in react native
uh and also wrote some recognitive
module but to expose native
functionalities of a native ios and
android side on json
so i work on real-time communication
where i use sockets the custom solution
and also using third-party libraries
like sandboard and gate stream
uh also working on real-time streaming
using vivido
and integration of real-time geolocation
and using maps or working on social
media features like uh feed listing
like dislike comments sharing on diff on
two different other uh social uh
platforms also provide a login
functionality uh the author using a
google facebook linkedin uh and also
work with the payment solution i like
stripe update uh so yeah so almost i
cover every
uh thing in that native so these are my
some glimpse of recognitive journey
okay
and i will start with basic questions
okay and then we can progress uh uh
during the interview and then we see how
it goes okay so my first question for
you is
uh what's the difference between
uh
props and state
yeah so if you talk about state it is
used to control the components the
variable data can be stored in the state
it is mutable means a state can change
the value at any time
and props props are used to pass data
to the different components it is
immutable means prop cannot change the
value uh it provide a container
connection between a container component
and a presentation component
cool and if you want to update that prox
oh sorry that props how would you do
that
send the props uh basically uh
by passing the prop in the element
section like for example we have a uh
cloud we have a component a so i pass
and the props has some data so uh using
the open angular bracket a and then uh
component name then the props name and
is equal to the value of props and props
cannot change the inner component use
that value uh of prop but cannot change
that
cool and what are uh containers okay or
smart
components uh container components are
those a wrecked component that have
access to the store uh take these
component make api call uh do some
processing and contain the app business
logic uh com container component
shouldn't have view logic or
presentation logic they have only uh
some some business logic and api
processing api calls and some uh
business logic processing the basic job
of container component is to complete
the values and fall down as a props to
the presentation component or the
component hence due to their make
processing api calls and the business
logic containing stuff that's why we are
referred as smart components
cool and it's following some design
pattern okay so uh what do you
understand by a component driven
development or a cdd
yeah so component driver development or
cdd is a development methodology that
enters the build process around
components it is a process that builds a
ui from the bottom up by starting at the
level of components and ending at the
level of pages or screen some of its
benefits are uh number one focus
development uh increased ui coverage uh
targeted feedback build up component
library polarized development uh and
testing aviva
okay so you mentioned testing i kind of
like it okay uh but before we go to
testing uh these components different
design or component driven development
it's similar to a
design pattern that i used to
work years ago called atomic design
right it's they are pretty similar so
you start creating this smaller
component which is great for react gs
and for uh
react native because of react as using
reconciliation to update the
uh the view based on components right
you guys already know that so uh
component driven development is similar
to atomic design you create the smaller
piece and then you are going to combine
them to another component and then
combine combine and combine is that
correct
yeah
cool and how would you test them so
what's the best practice in term of
testing for a component driven
development
uh basically for the testing purpose uh
we use adjust uh for the testing uh and
and using some test cases uh and execute
those test cases and then check the
resulted output if it is match uh if it
is flat as expected that the test case
is passed otherwise uh it's failed
cool
all right so
and so move on to
more for ui okay could you could you
please explain me the use of flexbox
index native
uh yeah sure so flexbox is designed to
provide a consistent layout on different
screen sizes uh flexbox works the same
way in react native as it does in the
css on the web but with a few exceptions
the default are different with flex
direction defaulting to column uh
instead of row if you talk about web uh
similarly align content defaulting to
flex dot uh but in the web it's touch
and similarly the flex chaining default
to zero uh instead of one and the flex
parameters support only a single number
instead of multiple numbers we normally
use a combination of flex direction uh
align item and justify control to
achieve the right layout
i like to use flexbox as well okay just
to mention just in addition to that
okay all right so in regarding uh my
previous question about components
what do you understand about uh higher
order components or higher functions
so basically a high order component is
hoc uh where the the parameter is of
another component
if we talk about the example it's
similar to the foreign loop that in the
for each itself functionally take
another function as an input similarly i
chose component is a component that take
another component as an input
great
all right all right and just in addition
to that uh we cannot use uh higher the
component inside the rendered method
because as i mentioned before right so
react user reconciliation based on
components to update the view so if you
have a component that always change
uh it
you could break your application because
it will start to be rendered forever
right
yeah similarly there are by default a
multiple high component high order
component defined by the library like
the basic one is connect so it it accept
the map state to prop map display to
blob and another component yeah so but
what you can create custom high order
components too all right this one is the
most famous one i would say connect from
redux right also if you go for ui
libraries like uh battery ui you will
see um higher the function that start
with with styles with this this index so
this is a a good practice in term of uh
high order components you start with the
keyword with okay it's not mandatory but
when you get a large application and
then you see
at the bottom you see i export with
styles uh with hooks with this this is
and that you see that that component
or that function is a higher the
components cool yeah sure
it's the best pattern it's like the same
thing that we are using the custom hook
with by the starting with the use
what's correct yeah and so by the way so
how can we use
uh custom hook with red native
uh custom hook with the right native so
uh it's like the same uh for example if
we talk about the creation uh
who contained some
ui or some uh some manipulation logic so
it's uh start with the word use like i
have a some hook use uh
like you state so it's using the we have
two things one is value update function
so it gets uh we have we use the array
notation the open angle bracket the
close active bracket and the first
parameter is the data and the second
parameter is for the set data so the
second parameter is to set the state and
the first parameter is the state
state value
cool and then use it starts to usually
start with hooks right
with the keyboard use uh and also uh
what i recommend them of uh
hierarchy components and
react hooks as well custom hooks uh just
create one state
because every you know that react it
will trigger render every time you uh
change every uh
state so when you are creating higher
functions or higher components uh keep
in mind just update the state when when
is necessary because otherwise you will
trigger rewind in your application all
the time so just have one state you can
use use refs okay to accumulate values
but uh
just update the state once it's ready
okay and as we talk about use refs so so
what do you understand about user refs
uh user f is basically uh if you talk
about the state variable uh if we can
manipulate the state value by the help
of use ref
for example i have some state variable x
and i have to uh
keep i on that variable i am using use f
and pass the
the
x variable there uh so now that that we
have a reference of that variable and we
have an uh every time if the value of x
is changing we have a reference for that
so we can
manipulate or we can write our logic or
primary
correct and ref is different from value
right so when you work with refs you are
working with the reference not the value
itself so if you score a set timeout and
try to get the value from the user have
you will get the delay the latest value
right
yeah and also it won't trigger every
render that's a good tip for performance
as well okay regarding react.js so
let's now go back to react native uh
specific question for react native okay
how do you okay implement a screen
navigation functionality in react native
yeah so basically the screen on
navigation was a main functionality of
any mobile app there are different
multiple screens involved for that so
managing the presentation of and
transition between a multiple screen is
typically headed by what is known as a
navigator a rack navigation provides an
easy-to-use navigation solution
with the ability to provide uh to
present common stack navigation and tab
navigation pattern on both android and
ios the community solution is to uh
navigation is a standalone library that
allows developer
to set up the screens uh of an app with
a few just few lines of code
yeah that was great okay yeah i just i
would like to call upon our react uh
native fellas here or any developer that
are watching us today so if you have a
three plus years of experience and are
confident with the skill set that you
possess you can head on turin.com's last
jobs uh
search for the job that is suitable for
your tech text it could be react native
could be
uh react.js could be python java uh c
sharp anything go to tuning dot com
slash jobs search for the job for your
tech stack apply for that job and once
you uh complete the vetting process okay
you'll find a remote job as we did and
then you can work traveling around the
world with your family if you wish to
right
what else uh one more thing if you are
enjoying this content please hit the
like button that's that's why i know
that you are enjoying this content and
leave a comment section below if you um
leave a message there if you would
answer this question in a different way
because i like to hear that i i watch i
read all the comments and it make me
learn too because sometimes i got the
comments in the section that are really
great and it makes me a better developer
and you can help other developer as well
okay as that said okay let's go back to
our react native interview and also this
one is also happens in
in react.js as well so so
what is the reactive virtual dom okay
how how the how does the virtual dom
work in uh indirect native
basically virtual dom is uh the frequent
dom manipulation are expensive uh like
we talked about the old for example web
concept there is a real dom
and there is some computation cause uh
to differentiate uh between those uh
nodes but but erect introduce our thing
that is virtual dom and and the whole
rec library based on this virtual dom
basically it is a virtual representation
of dom in a memory so it's not a real
dom it's a the copy of dom it's a
virtual dom so it's synced with the real
dom with the react dom library uh this
process is called reconciliation and
react compare the virtual dom and free
updated virtual dom and only mark the
subtree of component that are updated
this process is called differing and the
algorithm behind this thing is called
disk algorithm and react uh uses keys to
avoid unnecessary read
using multiple uh state variables probes
so it it renders the particular element
uh if the uh particular state value is
changed for example you are using x y z
there are three states uh there and you
are uh creating the view by using x y z
state and you only update the value of x
now
due to this virtual dom and the process
of reconciliation and using difficult
algorithm it only update the node uh and
the element x instead of updating wires
that that is much competition so it's so
it is it's used to more optimize
approach uh
and that's the beauty of that
cool and to be honest
i'm blind with you today okay
all right so and then i just realized
one thing today is uh
never mind i was just would say today my
birthday but never mind let's go back to
our interview okay so uh next question
uh can i react native
sorry can i react native be used uh i'll
say to build application for
tv for example uh i've seen a lot of
components for
that react js uses a lot of components
like reactive reactive video so
can a react native be used to
build search applications for for tv i
mean
uh technically yes a ragnay despot tv
but community support and the better
documentation are not uh yet available
uh basically tv devices sport has been
implemented with the intention of making
existing a recognitive application just
work on apple tv and android tv with few
or no changes are needed in the java
code for the application since there are
a lot of similarities between ios and tu
tv os api it was easy to add tv sport
index native but there are not many
developers using that native uh for
building tv application at one point the
communicative was discussing removing it
from the core library also people facing
a few of the issues or problems while
using that native uh to develop tv so in
simple what uh basically uh it's support
a tv but there is not much better
support in terms of community and
documentation uh or are you at a video
yeah that that is something that we need
to improve definitely so basically yes
it that supports tv
but so you have to discover how to do
that because the documentation are not
great as the library right
all right so
okay so we are coming to the end okay
uh i just have one more question for you
uh
this question is
uh
how could we check okay if you are
working for react native application how
can we check if the react native app is
in debug or is not released built
yeah basically the react native
already gave out the variable that is
environment variable the under
underscore uh double dev and double
underscore so if that value is true so
it means that you are using the debug uh
device uh
you know application but if that value
is false so it means that you are using
the release bit
cool and what's the best way to debug a
react native application
uh you can use the if statement that for
example uh if uh in the parentheses you
can use the underscore underscore dev
underscore underscore variable it can be
a boolean variable true or false and you
can put the statement there like you can
put some console uh so and and wrote
some block value there and you can check
that if the build is in the developer
environment then it will be
along the console otherwise it will not
okay basically what i'm saying is we
console uh we console.log
whatever we want inside a double uh
score debug
variable right
all right one one last question okay uh
is there any way
to inspect the
the react yes uh direct native app for
example if i want to check the
the ui why why the title is breaking so
is there any way for us to inspect that
yeah basically uh you are talking about
the debugging we can use a chrome
debugger uh you can shake the
application or or by uh
pressing the command d on the keyboard
uh to open the menu and you can click on
the chrome debugger then it will open
the link uh or under your on your
console chrome browser and you can debug
your application the javascript code and
also some ui logic gear
so i have we could use chrome debugger
to inspect the ui and also the
javascript as well correct yeah totally
are used for both purposes okay great so
uh as that said that was my last
question for you thank you sesame uh it
was really nice to speak to you it was
my pleasure i learned a lot with you
today okay uh and to everybody else
thank you for turning this mark
interview series uh rio and i hope you
enjoyed this interview as much as i did
we shared a value of tips here as i
mentioned this question was more for
youtube purpose if you go to interview
you might get some or any some different
questions of course and if you are
looking for some specific mock interview
series uh you can let me know in the
comment section below for example we are
following you and we are taking the
market review as your demand okay uh
what else don't forgot to subscribe to
our channel like this content if you
enjoyed that and we will make we will be
back very soon with new episode of
touring mock interview series uh till
then give us a thumbs up subscribe to
our channel follow us on instagram
linkedin facebook
twitter clubhouse stay close to tuning
and i'm pretty much sure that you find
the job as we did okay as that said
that's a wrap i hope to see you all
again in the next video and happy coding
you
Ver Más Videos Relacionados
React Native in Webview: Everything You Need to Know - Simone Carazzai | React Native Heroes 2023
My Final Flutter Video
Cara Install React Native + Full Setup [2024]
frontend interview questions for freshers - Selected 🎊🤩💯
Every React Concept Explained in 12 Minutes
the coding project that improved my skill the most (senior developer, no cs degree)
5.0 / 5 (0 votes)