TechMahindra React JS Hackathon Experience
I recently participated in a hackathon organised by Hacker Earth for TechMahindra.
Here I am sharing few questions which I faced during the hackathon. The whole quiz was focused on conceptual knowledge in React rather than on coding skills.
Q1. If one would ask you: “How to manage styles in a React app?”. Which option would you choose to answer the question.
a. Styles can only be locally “scoped” to a component. Unfortunately, the global stylesheet is not supported.
b. Any approach that is commonly accepted (eg CSS, inline-stlyles, SASS etc.)
c. You can use only inline styles written in JavaScript.
d. Must always use <style>…</style> tag.
.
.
.
For this question, I do not know the correct answer, Based on my previous experience with React I selected the option B. Because Option D is not applicable of React app. Option C is a bad practice. For option A, First part is correct, but we do have support of global stylesheet.
Please do let me know in comment, if there is any better explanation for this.
Q2. Strict mode helps in which of the following issues:
a. Certain lifecycle methods are unsafe to use in asynchronous react applications. With the use of third party libraries, it becomes difficult to ensure that certain lifecycle methods are not used.
StrictMode helps in providing us a warning if any these class components use an unsafe lifecycle method.
b. If one is using an older version of React, callback ref is the recommended way to manage refs instead of using string refs. StrictMode gives a warning if we are using string refs to manage refs.
c. Previously, findDOMNode() method was used to search the tree of a DOM node. This method is deprecated in React, Hence the StrictMode gives us a warning about the usage of this method.
d. All of the above.
.
.
.
The best possible option for this question is Option A
Q3. When we map array values to JSX markup, what prop we must pass to the mapped element?
a. The “arraySource” prop. <Elem arraySource={array} />
b. The “unique” prop. <Elem unique={val} />
c. The “mapped” prop. <Elem mapped={true} />
d. The “key” prop. <Elem key={val} />
.
.
.
We pass key prop when we return list of elements using map. Hence option D.
Q4. Mounting refers to the component in React (created DOM nodes) being attached to some part of the document.
What is React’s mounting point?
a. A container for React application (HTML element).
b. Global JavaScript variable that can be accessed to get info about all components in the app.
c. Theoretical term to describe the place where a component is mounted on the page.
d. Component’s wrapping element. Every component has its own mounting point.
.
.
.
For this the best suitable choice is option D.
Q5. What happens under the hood when we run the build command? (i.e. npm run build )
a. A project manager (module bundler) builds all the sources and produces an executable file (e.g sh or exe file).
b. A project manager (module bundler) will process all the source code and produce a production version that is optimised and can be used for deployment.
c. A project manager (module bundler) will copy all source code into the folder name “build”. The command is used only for convenience. Afterward, the build folder can be deployed into the production.
d. Source code will be compiled “on the fly”. After the build is finished and everything has compiled, the project will be opened in the user’s default browser.
.
.
.
I was confused b.w. B and C. But in the last went with B. The reason for this is that, code is not copied, it is processed when we run. build command. And we get the optimized code in the last which we can deploy.
For C, copy all source code into, due this line, I went with B.
Please do let me know if you think differently.
Q6. Serizawa was asked by his interviewer to explain what is "style" prop on HTML elements in React ?
a. The "style" prop is used to set elements inline styles.
b. React is not capable of processing .css files and the "style" prop must be always used to style an element.
c. The "style" prop must be a string of CSS class names.
d. the "style" prop must be a string path to a .css file that will be used to style the element.
.
.
.
For this, option A is best choice.
Q7. Here are some reference statements on React fundamentals. have look at these statements and analyse the correct statement.
a. React has a limit on the number of props an element can receive.
b. componentDidMountfires on every component update.
c. The state can be store in a variable instead of using useState.
d. A component must always return a single element.
.
.
.
For this option D is a best choice.
Q.8 If a component is re-rendered , what happens to all elements/components inside the component?
a. props passed to inner and nested elements will be changed to undefined
b. All inner elements will stay unchanged but will consume more memory.
c. All inner elements will be unmounted
d. All inner and nested/components will be re-rendered too.
.
.
.
for this, Option D is a best choice, because if parent re-renders, all its child re-renders.
Q9. Although Iva was done what she wanted to implement, she tried to lift up the state to the parent component. It seemed unwanted but can you tell why would you even lift up the state-to-parent component?
a. To avoid dealing with the component’s local state.
b. It’s more beneficial to receive state as props coming from the parent component.
c. To share the state between multiple children components.
d. To intentionally cause re-renders to the parent component.
.
.
.
We lift state up to share state b.w. multiple child components, Hence option C.
Q10. Following code implements react condition rendering. What is conditional Rendering?
a. Conditionally use CSS
b. Conditionally include or exclude JavaScript code
c. Conditionally render markup based on some condition
d. Conditionally replace a component with other component
.
.
.
I was confused b.w. C and D. But went with C, because we never replace something, we re-rendering things using conditional rendering.
I hope these questions helps you to explore something new in React.
