ReactJS Questions

1. What’s the purpose of React JS and why would you prefer it over developing in
simple JS ?
2. What are components in React JS and how is it beneficial/advantages ?
3. What are the two main things on the basis of which a component re-renders ?
4. In a tree hierarchy of n number of nested components, how would you pass data
from top level component to component at 5th level in the components tree
hierarchy ?
5. Let’s say you define css for two components but both the components have
classes with the same name, for example “.title”. If both styles are loaded in the
browser at the same time, will the title class of one component interfere/override
with the title class of the other component ? If it will, then how would you handle
them in a way that they don’t and remain seperated ?
6. Let’s say you update the state of a component within a function:
const [count, setCount] = useState(0);
function updateCount (value){
setCount(value);
console.log(count);
}
updateCount(5);
What will be the value printed in the console when the function is called and why
?

7. You want to fetch a list of cities from an HTTP REST API and display/render
them as . What will be the use cases that you will need to handle other than just
fetching and rendering them in the UI ?

8. If a UI or let’s say a piece of HTML/CSS code is being repeated at different

places in an app. How will you make them reusable in ReactJS ?

9. In the same way if a component's logic is being repeated at different places. How
would you make them reusable in ReactJS ? Take in consideration both stateful
react logic/code and raw Vanilla JS core logic/code.

10. Let’s say a user comes to a web page, enters their credentials like username and
password and successfully logins in the website. How would you store the logged
in user authentication credentials in the ReactJS app which you received in
 response when the login API was hit so that when the user comes next time, it
will already be logged in? If you have multiple ways of storing it, then mention all
of them and which one would you prefer and why ? Also look for the security
concerns when doing so.

11. There are multiple routes/pages in an app. And you want to protect a few pages
from unauthorized access. Like if a user hasn’t logged in, then they should not be
able to access the “/dashboard” page. Even if they directly hit the “/dashboard”
route in the browser they should be restricted/not allowed to view that page. How
would you handle it ?

12. Let’s say you have a piece of data that is required at different places in an app.
How would you make that data easily available throughout the app? By
“throughout” means that it should be readily accessible by each component.
(This is linked with question 4 and your answer for it depends on it)

13. Let’s say there is a search input field, whenever a user types in the input, it hits
an HTTP REST API and brings back data and renders it. But how would you
handle the searching in such a way that rather than calling API on every
character that is typed in the input, it should only call API after one second of
typing. Let’s say you typed 3 letters in 1 second, then rather than calling the API
3 times, it should only be called once and so on.

14. How can you prevent re-rendering of a component when its parent component
re-renders, write down the different ways you can handle this scenario ?

15. Let suppose there is a case when a user logs in and after an hour the user is
logged out automatically for security purposes. How would you re-login without
taking username and password from the user again by redirecting to the login
route? And make sure the user doesn’t need to do anything to re-login.

16. How would you handle the case if a user wants to submit a form on click of any
keyboard button instead of a mouse event? Describe all possible solutions for
this task and what can be its side effects?

17. If you have a ReactJS app that has 10 pages and all have one shared
component called Header, In the header you have to display a UI alert
conditionally at some specific pages, How would you display that UI alert,
Propose at least 3 different solutions?
18. What is the difference between class base component and function base
component? Describe main differences and which approach is most popular
these days, describe its benefits.

19. If you are building a large scale project and in multiple components you have to
call the same http request, How would you prevent multiple API calls and is there
a way that you only call API once and later use it? What is the best approach to
handle this scenario?

20. If you have a lot of images rendering on a page and due to the large number of
images loading at run time it's loaded slowly. If you have to apply a solution to
load all images at once and render once all are loaded, What solution will you
propose?

21. If you have a list having 1 million objects and you have to render on a page,
What approach would you prefer to apply to avoid rendering/lagging issues to
such a huge data, mention at least 2 different approaches.

22. Let’s say a user goes to a web page which has a list of fruits rendered in a table.
User searches for the term “apple”, then applies a filter for a price range lesser
than “200” and then sorts them in alphabetical order as well. As a result, fruits
are fetched from an HTTP REST API accordingly and rendered. Now how can
the user share the URL of the page with someone else so that if the other user
opens the URL, it renders the page with the filters applied rather than the default
view ?

23. Let’s say you want to store a value inside a component and it’s repeatedly
reassigned as well, but it isn’t used for rendering purposes. How would you store
it, in a variable, state or somewhere else and why ?

24. How do you do code splitting ? Like when serving a ReactJS app, it only loads
the code over the network which is required to render the page and doesn’t load
the source code all together.

25. Why is the key prop required when rendering a list ?

26. Does a browser support components and JSX ? and if not, then how is the
ReactJS code compatible with it if it can’t interpret it ?
27. What really is Virtual DOM and how does ReactJS use it to reconcile with the real
DOM ?

28. Write down a reusable component for an input element, such that it takes all the
common attributes, styling and error messages as well.

29. Write down a reusable component for a button element.

30. Write down a reusable table element, with the following acceptance criteria:
a. It must be responsive
b. It renders rows and columns based on data format like an array of objects
provided as prop, and each property in an object represents a column and
the object itself is the row.
c. The object property could be anything, a text, a component or an element.
d. It must have a search bar, such that when a user searches a term, it
should filter and only render the rows matching the search term. Use the
above input component for the search field. But handle it in such a way
that it should only search on fields/properties/columns which are text.
e. It should have a sorting capability in alphabetical or numerical order, again
handle it to sort for text fields only.
f. It should have a pagination as well. And the one could also specify how
many items to render on a single page and paginate the rest. Use the
above button component for the pagination items.

31. Write down a custom hook, which returns back the dimension of the browser
window on the initial render and whenever it is resized.

32. How would you keep track of a component that was initially rendered ? Write a
custom hook, where you perform an action/callback only if the component had
already initially rendered and passed the mounting phase.

33. Write a custom hook, which gets URL and headers as input, initially fetches data
and returns back the result, error (if any) and a method to call the API again. Use
JSON placeholder API or any other to test.

34. const [user, setUser] = useState({

name: ‘Ali’,
age: ‘27’,
address: {
street: ‘1’,
 house: ‘7-C’,
city: ‘Bahawalpur’,
country: ‘Pakistan’,
postal: {
code: ‘631’
}
},
}
const handleOnChangePostalCode = () => {
const userClone = [...user];
userClone.address.postal.code = ‘63100’;
console.log(‘user’, user);
});

When handleOnChangePostalCode is called, what will be the value of the postal

code in the user state and why ?

35. Write a custom hook for form validation. Which will take form schema (object)
and validation schema (object) as input and return values, errors and setter
method to update form values.