[pull] master from sudheerj:master

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+github: [sudheerj]
+custom: https://buymeacoffee.com/sudheerj
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-Present Sudheer Jonna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

coding-exercise/README.md

@@ -1,68 +1,229 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+### Coding Exercise
+
+#### 1. What is the output of below code
+
+```javascript
+import { useState } from 'react';
 
-## Available Scripts
+export default function Counter() {
+  const [counter, setCounter] = useState(5);
+
+  return (
+    <>
+      <span>{counter}</span>
+      <button onClick={() => {
+        setCounter(counter + 5);
+        setCounter(counter + 5);
+        alert(counter);
+        setCounter(counter + 5);
+        setCounter(counter + 5);
+      }}>Increment</button>
+    </>
+  )
+}
+```
+
+- 1: Alert with 5, 5
+- 2: Alert with 15, 25
+- 3: Alert with 5,  10
+- 4: Error: Cannot update the same state multiple times concurrently
+
+<details><summary><b>Answer</b></summary>
+<p>
+
+##### Answer: 3
+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 until all the code executed with in an event handler before your state updates followed 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).
+
+This can be visuallized by substituting with state variable values in the particular render,
+```javascript
+      <button onClick={() => {
+        setCounter(5 + 5);
+        setCounter(5 + 5);
+        alert(5);
+        setCounter(5 + 5);
+        setCounter(5 + 5);
+      }}>Increment</button>
+```
+</p>
+</details>
 
-In the project directory, you can run:
+---
 
-### `yarn start`
+**[⬆ Back to Top](#table-of-contents)**
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+#### 2. What is the output of below code
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+```javascript
+import { useState } from 'react';
 
-### `yarn test`
+export default function Counter() {
+  const [counter, setCounter] = useState(5);
+
+  return (
+    <>
+      <span>{counter}</span>
+      <button onClick={() => {
+        setCounter(counter => counter + 5);
+        setCounter(counter => counter + 5);
+        alert(counter);
+        setCounter(counter => counter + 5);
+        setCounter(counter => counter + 5);
+      }}>Increment</button>
+    </>
+  )
+}
+```
+
+- 1: Alert with 5, 25
+- 2: Alert with 5, 10
+- 3: Alert with 15, 25
+- 4: Alert with 15, 10
+
+<details><summary><b>Answer</b></summary>
+<p>
+
+##### Answer: 1
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+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.
 
-### `yarn build`
+</p>
+</details>
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+---
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+**[⬆ Back to Top](#table-of-contents)**
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+#### 3. What is the output of span after one click?
 
-### `yarn eject`
+```javascript
+import { useRef } from 'react';
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+export default function Counter() {
+  let countRef = useRef(0);
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+  function handleIncrement() {
+    countRef.current = countRef.current + 1;
+  }
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+  return 
+  <>
+    <span>Count: {countRef.current}</span>
+    <button onClick={handleIncrement}>
+      Click me
+    </button>
+  </>
+}
+```
+
+- 1: Cannot read current property of undefined
+- 2: Count: 1
+- 3: null
+- 4: Count: 0
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+<details><summary><b>Answer</b></summary>
+<p>
 
-## Learn More
+##### Answer: 4
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+In React, every update has two phases. 
+1. **Render:** This is where React calls the components in order to output something on the screen
+2. **Commit:** React applies changes to the DOM
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+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.
+</p>
+</details>
 
-### Code Splitting
+---
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+**[⬆ Back to Top](#table-of-contents)**
 
-### Analyzing the Bundle Size
+#### 4. What is the outcome of below code after button click?
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+```javascript
+import { useRef } from 'react';
 
-### Making a Progressive Web App
+function MyCustomInput(props) {
+  return <input {...props} />;
+}
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+export default function MyCustomForm() {
+  const inputRef = useRef(null);
 
-### Advanced Configuration
+  function handleInputFocus() {
+    inputRef.current.focus();
+  }
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+  return (
+    <>
+      <MyCustomInput ref={inputRef} />
+      <button onClick={handleInputFocus}>
+        Click Me
+      </button>
+    </>
+  );
+}
+```
 
-### Deployment
+- 1: Input gets the focus
+- 2: Warning: Function components cannot be given refs.
+- 3: Cannot read current property of undefined
+- 4: Warning: Missing ref on <input /> element
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+<details><summary><b>Answer</b></summary>
+<p>
 
-### `yarn build` fails to minify
+##### Answer: 2
+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:
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+```javascript
+Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+```
+
+This issue can be fixed by wrapping the **<MyCustomInput />** component with `forwardRef` function which accepts ref as the second argument which can be used on the **<input />** element as **ref={ref}**
+
+</p>
+</details>
+
+---
+
+**[⬆ Back to Top](#table-of-contents)**
+
+#### 5. What is the outcome of number of clicks after 3 button clicks?
+
+```javascript
+import { useRef } from 'react';
+
+export default function Counter() {
+  let ref = useRef(0);
+
+  function handleClick() {
+    ref.current = ref.current + 1;
+  }
+
+  return (
+    <>
+		<div>Clicked + {ref.current} + times</div>
+		<button onClick={handleClick}>
+			Click me!
+		</button>
+    </>
+  );
+}
+```
+
+- 1: 3 times
+- 2: 4 times
+- 3: 2 times
+- 4: 0 times
+
+<details><summary><b>Answer</b></summary>
+<p>
+
+##### Answer: 4
+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.
+</p>
+</details>
+
+---
+
+**[⬆ Back to Top](#table-of-contents)**

coding-exercise/src/App.js

@@ -8,7 +8,7 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.js</code> and save to reload browser.
         </p>
         <a
           className="App-link"