23 | );
24 | }
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/coding-exercise/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/coding-exercise/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "coding-exercise",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "react": "^16.13.1",
10 | "react-dom": "^16.13.1",
11 | "react-scripts": "3.4.1"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test",
17 | "eject": "react-scripts eject"
18 | },
19 | "eslintConfig": {
20 | "extends": "react-app"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/coding-exercise/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/coding-exercise/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/coding-exercise/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/coding-exercise/README.md:
--------------------------------------------------------------------------------
1 | ### Coding Exercise
2 |
3 | #### 1. What is the output of below code
4 |
5 | ```javascript
6 | import { useState } from 'react';
7 |
8 | export default function Counter() {
9 | const [counter, setCounter] = useState(5);
10 |
11 | return (
12 | <>
13 | {counter}
14 |
21 |
22 | )
23 | }
24 | ```
25 |
26 | - 1: Alert with 5, 5
27 | - 2: Alert with 15, 25
28 | - 3: Alert with 5, 10
29 | - 4: Error: Cannot update the same state multiple times concurrently
30 |
31 | Answer
32 |
33 |
34 | ##### Answer: 3
35 | State values are fixed(i.e, default value 5) in each render and setting the state only changes it for the next render. React will wait untill all the code executed with in an event handler before your state updates follwed by re-rendering the UI. Also, all the 3 setter function calls are replacing the calculated value. Hence, irrespective of how many times you call `setCounter(counter + 5)` the final value is 10(5+5).
36 |
37 | This can be visuallized by substituting with state variable values in the particular render,
38 | ```javascript
39 |
46 | ```
47 |
84 |
85 | ##### Answer: 1
86 |
87 | React queues all the updater functions(e.g, counter => counter + 5) which will be processed after all the code inside event handler has been executed. During the next re-render(state update through setState), React goes through the queue and increment the counter based on the previous value in each function call. So the final value of counter becomes 25(initial value 5 + 5 + 5 + 5 + 5) whereas the alert shows default value 5 because the counter value won't be updated by that time.
88 |
89 |
90 |
91 |
92 | ---
93 |
94 | **[⬆ Back to Top](#table-of-contents)**
95 |
96 | #### 3. What is the output of span after one click?
97 |
98 | ```javascript
99 | import { useRef } from 'react';
100 |
101 | export default function Counter() {
102 | let countRef = useRef(0);
103 |
104 | function handleIncrement() {
105 | countRef.current = countRef.current + 1;
106 | }
107 |
108 | return
109 | <>
110 | Count: {countRef.current}
111 |
114 | <>
115 | }
116 | ```
117 |
118 | - 1: Cannot read current property of undefined
119 | - 2: Count: 1
120 | - 3: null
121 | - 4: Count: 0
122 |
123 | Answer
124 |
125 |
126 | ##### Answer: 4
127 |
128 | In React, every update has two phases.
129 | 1. **Render:** This is where React calls the components in order to output something on the screen
130 | 2. **Commit:** React applies changes to the DOM
131 |
132 | Any updates to the ref will be reflected only in the commit phase. In other words, React sets **counterRef.current** during the commit phase. Hence, **countRef.current** always holds value `0` irrespective of how many times the Increment button clicked.
133 |
134 |
135 |
136 | ---
137 |
138 | **[⬆ Back to Top](#table-of-contents)**
139 |
140 | #### 4. What is the outcome of below code after button click?
141 |
142 | ```javascript
143 | import { useRef } from 'react';
144 |
145 | function MyCustomInput(props) {
146 | return ;
147 | }
148 |
149 | export default function MyCustomForm() {
150 | const inputRef = useRef(null);
151 |
152 | function handleInputFocus() {
153 | inputRef.current.focus();
154 | }
155 |
156 | return (
157 | <>
158 |
159 |
162 |
163 | );
164 | }
165 | ```
166 |
167 | - 1: Input gets the focus
168 | - 2: Warning: Function components cannot be given refs.
169 | - 3: Cannot read current property of undefined
170 | - 4: Warning: Missing ref on element
171 |
172 | Answer
173 |
174 |
175 | ##### Answer: 2
176 | By default, React does not allow a component access the DOM nodes of other components even for child components. If you still try to access the DOM nodes directly then you will receive below error:
177 |
178 | ```javascript
179 | Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
180 | ```
181 |
182 | This issue can be fixed by wrapping the **** component with `forwardRef` function which accepts ref as the second argument which can be used on the **** element as **ref={ref}**
183 |
184 |
185 |
186 |
187 | ---
188 |
189 | **[⬆ Back to Top](#table-of-contents)**
190 |
191 | #### 5. What is the outcome of number of clicks after 3 button clicks?
192 |
193 | ```javascript
194 | import { useRef } from 'react';
195 |
196 | export default function Counter() {
197 | let ref = useRef(0);
198 |
199 | function handleClick() {
200 | ref.current = ref.current + 1;
201 | }
202 |
203 | return (
204 | <>
205 |
221 |
222 | ##### Answer: 4
223 | If you try to use **{ref.current}** in the render method, the number won’t be updated on click. This is because **ref.current** does not trigger a re-render unlike state. This property is mainly used to read and write the values inside event handler or outside the render method.
224 |