├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── data.json ├── data │ ├── hook.js │ ├── interview.js │ ├── javascript.js │ └── react.js ├── index.css ├── index.js ├── logo.svg ├── pages │ ├── home.js │ └── style.css ├── reportWebVitals.js └── setupTests.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-note", 3 | "version": "0.1.0", 4 | "homepage": "https://johnmichael746.github.io/my-note/", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "bootstrap": "^5.2.3", 11 | "react": "^18.2.0", 12 | "react-bootstrap": "^2.6.0", 13 | "react-dom": "^18.2.0", 14 | "react-focus-lock": "^2.9.2", 15 | "react-highlight": "^0.15.0", 16 | "react-highlight-textinput": "^1.0.3", 17 | "react-highlight-words": "^0.18.0", 18 | "react-keywords": "^0.0.5", 19 | "react-scripts": "5.0.1", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "predeploy": "npm run build", 24 | "deploy": "gh-pages -d build", 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "devDependencies": { 49 | "gh-pages": "^4.0.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dotnetstar82/Note-JSQA/72d31179e92a9e11a901ebbcdbbd8c1ba39eccc9/public/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dotnetstar82/Note-JSQA/72d31179e92a9e11a901ebbcdbbd8c1ba39eccc9/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dotnetstar82/Note-JSQA/72d31179e92a9e11a901ebbcdbbd8c1ba39eccc9/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Home from "./pages/home"; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/data.json: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { id: 1, name: 'John',email: 'user1@gmail.com', password: '123456' }, 3 | { id: 2, name: 'Pete' , email: 'user2@gmail.com', password: '123456' }, 4 | { id: 3, name: 'Mary' , email: 'user3@gmail.com', password: '123456' }, 5 | ]; 6 | -------------------------------------------------------------------------------- /src/data/hook.js: -------------------------------------------------------------------------------- 1 | export const hook = [ 2 | { 3 | title: "What are React Hooks?", 4 | type: 2, 5 | content: `Hooks are a new addition in React 16.8. They let I use state and other React features without writing a class. With Hooks, I can extract stateful logic from a component so it can be tested independently and reused. Hooks allow I to reuse stateful logic without changing my component hierarchy. This makes it easy to share Hooks among many components or with the community.` 6 | }, 7 | { 8 | title: "What are advantages of using React Hooks?", 9 | type: 2, 10 | content: `Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components. 11 | Hooks don’t work inside classes (because they let I use React without classes). By using them, we can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount. Instead, we will use built-in hooks like useEffect .` 12 | }, 13 | { 14 | title: "How to call loading function with React useEffect only once?", 15 | type: 2, 16 | content: `If I only want to run the function given to useEffect after the initial render, I can give it an empty array [] as the second argument.` 17 | }, 18 | { 19 | title: "How to access DOM elements in React?", 20 | type: 2, 21 | content: `One of the useful application of the useRef() hook is to access DOM elements. This is performed in 3 steps: 22 | - Define the reference to access the element const elementRef = useRef(); 23 | - Assign the reference to ref attribute of the element:
; 24 | - After mounting, elementRef.current points to the DOM element.` 25 | }, 26 | { 27 | title: "How to use componentWillMount() in React Hooks?", 28 | type: 2, 29 | content: `I cannot use any of the existing lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a hook. They can only be used in class components. And with Hooks I can only use in functional components. 30 | I can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. 31 | - Code inside componentDidMount run once when the component is mounted. useEffect hook equivalent for this behaviour is. 32 | - Without the second parameter the useEffect hook will be called on every render (like componentDidUpdate) of the component which can be dangerous. 33 | - Hook equivalent of componentWillUnmount() code will be as follows` 34 | }, 35 | { 36 | title: "Does React useState Hook update immediately?", 37 | type: 2, 38 | content: `React useState and setState don’t make changes directly to the state object; they create queues to optimize performance, which is why the changes don’t update immediately. The process to update React state is asynchronous for performance reasons. 39 | To perform side effects after state has change, I must use the useEffect` 40 | }, 41 | { 42 | title: "What does Batching mean in ReactJS?", 43 | type: 2, 44 | content: `Batching is nothing but grouping React multiple state updates together into a single render state to achieve better computational performance. Until React 18, we only batched updates during the React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default.` 45 | }, 46 | { 47 | title: "What are the advantages of Batching in ReactJS?", 48 | type: 2, 49 | content: `- Batching is great for performance because it avoids unnecessary re-renders. 50 | - Batching also prevents my component from rendering half-finished states where only one state variable was updated, which may cause bugs. 51 | - Another reason to use batching is when the web application grows, the number of nested components will increase. Therefore, if a parent component executes an unbatched state updated, the entire component tree will be re-rendered per state update that is expensive.` 52 | }, 53 | { 54 | title: "Which lifecycle methods of class component is replaced by useEffect in functional component?", 55 | type: 2, 56 | content: `The lifecyce methods replaced by useEffect Hooks of functional component are componentDidMount(), componentDidUpdate(), and componentWillUnmount() 57 | 58 | - componentDidMount: is equivalent for running an effect once. 59 | - componentDidUpdate: is equivalent for running effects when things change. 60 | - componentWillUnmount: To run a hook as the component is about to unmount, we just have to return a function from the useEffect Hook` 61 | }, 62 | { 63 | title: "Compare React Context Api with useContext React hook", 64 | type: 2, 65 | content: `When using the React Context API: 66 | - We need to wrap our content in a Consumer component and then pass a function as a child just so we could access (or consume) our state. 67 | - This introduces unnecessary component nesting and increases the complexity of our code. 68 | When using useContext Hook: “use” context without a Consumer:` 69 | }, 70 | { 71 | title: "When would I use useContext hook?", 72 | type: 2, 73 | content: `React’s useContext hook makes it easy to pass data throughout my app without manually passing props down the tree. React Context is a way to manage state globally. Wrap child components in the Context Provider and supply the state value. Then I can access the user Context in all components:` 74 | }, 75 | { 76 | title: "Is there any problem when using useContext Hook?", 77 | type: 2, 78 | content: `The problem is that any component consuming state with useContext will re-render when any piece of the Context’s state updates. This resulted in components that were totally divorced from one another causing each other to re-render. 79 | In cases where these re-renders were expensive, the memory in users’ browsers accumulated JS Heap footprints in the orders of gigabytes.` 80 | }, 81 | { 82 | title: "Compare useState and useReducer implementations", 83 | type: 2, 84 | content: `- useState updates state with setState, while useReducer with dispatch function. 85 | - useState passes down all the setState custom helper functions, while useReducer passes down just the dispatch function. 86 | - useState needs to wrap functions in useCallback(if we want to memorize them), while dispatch function is already memorized. 87 | - useState easier to write, useReducer is harder to implement and needs more logic to be coded.` 88 | }, 89 | { 90 | title: "Do React Hooks cover all use cases for class components?", 91 | type: 2, 92 | content: `No, The following methods have not been introduced in Hooks yet: 93 | - getSnapshotBeforeUpdate 94 | - getDerivedStateFromError 95 | - componentDidCatch` 96 | }, 97 | { 98 | title: "How can I make use of Error Boundaries in functional React components?", 99 | type: 2, 100 | content: `As of v16.2.0, there's no way to turn a functional component into an error boundary. The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout my application. 101 | 102 | Also bear in mind that try/catch blocks won't work on all cases. If a component deep in the hierarchy tries to update and fails, the try/catch block in one of the parents won't work -- because it isn't necessarily updating together with the child. 103 | A few third party packages on npm implement error boundary hooks.` 104 | }, 105 | { 106 | title: "What are differences between React.memo() and useMemo()?", 107 | type: 2, 108 | content: `- React.memo() is a higher-order component (HOC) that we can use to wrap components that we do not want to re-render unless props within them change. 109 | - useMemo() is a React Hook that we can use to wrap functions within a component. We can use this to ensure that the values within that function are re-computed only when one of its dependencies change` 110 | }, 111 | { 112 | title: "What are common use cases for the useMemo?", 113 | type: 2, 114 | content: `<> The primary purpose of useMemo hook is "performance optimization". 115 | - It returns a memoized value, 116 | - It accepts two arguments - create function (which should return a value to be memoized) and dependency array. It will recompute the memoized value only when one of the dependencies has changed. 117 | <> Using useMemo I achieve: 118 | referential equality of the values (to further send them to props of the components to potentially avoid re-renders) 119 | eliminate redoing of the computationally expensive operations for same parameters` 120 | }, 121 | { 122 | title: "What are production use cases for the useRef?", 123 | type: 2, 124 | content: `useRef simply returns a plain Javascript object. Its value can be accessed and modified (mutability) as many times as I need without worrying about rerender. 125 | useRef value will persist (won't be reset to the initialValue unlike an ordinary object defined in my function component; it persists because useRef gives I the same object instead of creating a new one on subsequent renders) for the component lifetime and across re-renders. 126 | useRef hook is often used to store values instead of DOM references. These values can either be a state that does not need to change too often or a state that should change as frequently as possible but should not trigger full re-rendering of the component.` 127 | }, 128 | { 129 | title: "Explain the difference between useState and useRef hooks?", 130 | type: 2, 131 | content: `- Updating a reference created by useRef doesn't trigger re-rendering, while updating the state (setState) makes the component re-render; 132 | - useRef returns an object with a current property holding the actual value. In contrast, useState returns an array with two elements. 133 | - useRef's current property is mutable, but useState's state variable is not. 134 | - The reference update is synchronous (the updated reference value is available right away), while the state update is asynchronous (the state variable is updated after re-rendering). 135 | Using useRef - no re-renders. 136 | Using useState - triggers re-render` 137 | }, 138 | { 139 | title: "When would you use useRef?", 140 | type: 2, 141 | content: `To store a ref to DOM elements so I can later do something with them. 142 | To store values without triggering re-renders.` 143 | }, 144 | { 145 | title: "When writing a Custom Hook, what is the difference between it and a normal function?", 146 | type: 2, 147 | content: `Hooks use a stateful closure around the invocation of the function component to store the state on behalf of that component instance. That closure is maintained by React. 148 | - Custom hook will only be "stateful" if I use state with useState inside (or something that implements useState), 149 | - Hooks should be called from the React code only not from the regular JS functions. Hence, Hooks' scope is limited to the React code world and has more power to do a lot with React code, 150 | - In the class-based components, the Hooks won't work but regular functions will. 151 | - In the regular JS functions, I can't access useState, useEffect, useContext etc. but in react custom hooks I can.` 152 | }, 153 | { 154 | title: "Do two components using the same Hook share state?", 155 | type: 2, 156 | content: `No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time I use a custom Hook, all state and effects inside of it are fully isolated.` 157 | }, 158 | { 159 | title: "Do Hooks replace render props and higher-order components (HOC)?", 160 | type: 2, 161 | content: `Often, render props and higher-order components render only a single child. React team thinks Hooks are a simpler way to serve this use case. 162 | There is still a place for both patterns (for example, a virtual scroller component might have a renderItem prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in my tree.` 163 | }, 164 | { 165 | title: "What's the difference between useCallback and useMemo in practice?", 166 | type: 2, 167 | content: `With useCallback I memoize functions, useMemo memoizes any computed value: 168 | (1) will return a memoized version of fn - same reference across multiple renders, as long as dep is the same. But every time I invoke memoFn, that complex computation starts again. 169 | (2) will invoke fn every time dep changes and remember its returned value (42 here), which is then stored in memoFnReturn.` 170 | }, 171 | { 172 | title: "How do I update state on a nested object with useState()?", 173 | type: 2, 174 | content: `I can use spread syntax. Also while trying to update current state based on previous, use the callback pattern os setState` 175 | }, 176 | { 177 | title: "Is there a React hook equivalent to componentDidCatch?", 178 | type: 2, 179 | content: `There is not a React hook equivalent of componentDidCatch. However, the React team plans to add one soon. 180 | For functional components I can sometimes use try...catch to catch component errors. Also bear in mind that try/catch blocks won't work on all cases. If a component deep in the hierarchy tries to updates and fails, the try/catch block in one of the parents won't work -- because it isn't necessarily updating together with the child. 181 | That approach has some limitations: when I use a hook like useEffect and I use some internal functions in it, I cannot put that internal function into try...catch(Error Boundary) block because I should define that function on top of useEffect hook (why?) and I shouldn't use useEffect conditionally (why?)!` 182 | }, 183 | { 184 | title: "Are there any problems using useCallback?", 185 | type: 2, 186 | content: `Since MyChild component is light and its re-rendering doesn't create performance issues, using useCallback here is not important. Using useCallback I also increased code complexity.` 187 | }, 188 | { 189 | title: "Explain the use of useLayoutEffect React Hook", 190 | type: 2, 191 | content: `useLayoutEffect React Hook runs synchronously immediately after React has performed all DOM mutations. This can be useful if I need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating the state. 192 | As far as scheduling and lifecycle, this works the same way as componentDidMount and componentDidUpdate. my code runs immediately after the DOM has been updated, but before the browser has had a chance to "paint" those changes (the user doesn't actually see the updates until after the browser has repainted).` 193 | }, 194 | { 195 | title: "How would you store non-state/instance variables in functional React components?", 196 | type: 2, 197 | content: `I can use useRef hook (it's the recommended way stated in docs). useRef returns an object whose reference would not change across re-renders, the actual value for foo is then kept in the current property of that object. 198 | - Declaring variable: const a = useRef(5) // 5 is initial value 199 | - getting the value: a.current 200 | - setting the value: a.current = my_value` 201 | }, 202 | { 203 | title: "How can I force component to re-render with Hooks in React?", 204 | type: 2, 205 | content: `This is possible with useState or useReducer, since useState uses useReducer internally: 206 | useCallback memoizes forceUpdate, so it stays constant during component lifespan and can be passed as a prop safely. updateState({}) updates the state with new object on each forceUpdate call, this results in a re-render. So yes, it forces an update when being called. 207 | forceUpdate isn't intended to be used under normal circumstances, only in testing or other outstanding cases. This situation may be addressed in a more conventional way.` 208 | }, 209 | { 210 | title: "Can a custom React hook return JSX?", 211 | type: 2, 212 | content: `While there is no hardcore restriction on how I should define custom hooks and what logic should contain, it's an anti-pattern to write hooks that return JSX. 213 | There are a few downsides to using hooks to return JSX 214 | When I write a hook that returns JSX component, I are essentially defining the component within the functional component, so on each and every re-render I will be creating a new instance of the component. This will lead to the component being unmounted and mounted again. This is bad for performance and also buggy if I have stateful login within the component as the state will get reset with every re-render of the parent 215 | By defining a JSX component within the hook, I are taking away the option of lazy loading my component if the need be. 216 | Any performance optimization to the component will require I to make use of useMemo which doesn't give I the flexibility of a custom comparator function like React.memo() 217 | The benefit on the other hand is that I have control over the state of the component in the parent. However, I can still implement the same logic by using a controlled component approach` 218 | }, 219 | { 220 | title: "When would you want to avoid useEffect and use useLayoutEffect instead?", 221 | type: 2, 222 | content: `If my effect is mutating the DOM (via a DOM node ref) and the DOM mutation will change the appearance of the DOM node between the time that it is rendered and my effect mutates it, then I don't want to use useEffect. You'll want to use useLayoutEffect. Otherwise, the user could see a flicker when my DOM mutations take effect. This is pretty much the only time I want to avoid useEffect and use useLayoutEffect instead.` 223 | }, 224 | ]; -------------------------------------------------------------------------------- /src/data/interview.js: -------------------------------------------------------------------------------- 1 | export const types = ["Interview", "React", "React Hook", "JavaScript"]; 2 | 3 | export const interview = [ 4 | { 5 | title: "Tell me about yourself", 6 | type: 0, 7 | content: `First of all, let me tell you about myself. 8 | I am a front-end JavaScript developer with 10 years of experience. 9 | I specialize in Web and Decentralized applications, and in addition to front-end development, I am interested in Web Design, back-end development and GraphQL. 10 | My great performances are in TypeScript, JavaScript and its libraries and such as Angular, React, Redux, Web3.js, etc. 11 | I also have strong knowledge in Data Structure & Algorithm, which always helps me build robust and high-performance applications. 12 | My software developer career was started when I was a university student at the California State University – Los Angeles. 13 | You know who I'm envious of? People who work in a job that has to do with their college major. 14 | When I was a sophomore, I really loved art and design and I wanted to get a job for both art and science. 15 | I was selected as one of the internships at Enplug for later frontend position. They were recruiting employees extensively due the company had been founded in 2012. 16 | So, after the graduation from the university, I started working there located in Los Angeles at a junior position and promoted as a senior developer two years later. 17 | I could have clear understandings of modern Front-end technologies and best design practices there. 18 | That was my meaningful start in the software developers’ world. 19 | Later my skills expanded amazingly, especially in MERN stack. I have built over 30 websites using this stack in 2018. 20 | Regarding the knowledge of MERN Stack, all my development in React takes place on the front-end, I have switched to writing cascading styles in CSSinJS and also migrated my know-how to the React context. In the back-end I use Node.js and Serverless technology. 21 | I think those are my proudest achievements in my life as a software developer. 22 | However, on Jan 2020, as if it was a challenge against my life, I had to quit the company due to the pandemic. 23 | At that time, I preferred working from home, but the company asked me to commute to work. 24 | 25 | After that, I started finding a remote job, and succeeded joining loanDepot company in Lake Forest, CA. 26 | I was not only frontend developer, but also a designer for data visualization and analysis as a senior full stack JavaScript developer. 27 | And it was crucial for me to see that someone was keen to use. In that case, I didn’t even care that I had been coding in these languages for ten years or even more. 28 | Because the successful result doesn't come only from the experience. 29 | Ten years’ experience of my awesome knowledge is never important for users to use their products, but the result is much more important. 30 | So, I worked as agile as possible and maintained positive and happy client relationships with 20 corporate customers. 31 | You know it's blockchain winter now and the company can't afford to provide me more works. That's why they asked me to find a new work. 32 | I had to stop working under the trouble of my company and it made me move into a new freelancers’ world. So now I am working as a freelancer for about 3 months. 33 | Actually, I am free now and can start a new work immediately. 34 | That's all.` 35 | }, 36 | { 37 | title: "Why are you interested in this job?", 38 | type: 0, 39 | content: `Since pandemic, I would like to work for the health care. So I've worked some projects such as hospital infrastructure, working agency, crypto security and some more. 40 | Luckily, finding a job, I found out that your company is working as a primary mission to help people live healthier lives! Perfect same to my goal. 41 | And your company will host its annual Investor Conference with analysts and institutional investors in New York City tomorrow. 42 | In conjunction with the Investor Conference, an updated view of financial performance for 2022 and the initial outlook for 2023 was released just a few minutes ago. 43 | This is a job I really would like to work as a software engineer. 44 | And it's fun to work in a company where people truly believe in what they're doing!` 45 | }, 46 | { 47 | title: "What motivates you to work at this company?", 48 | type: 0, 49 | content: `I'm really driven by results. I like it when I have a concrete goal to meet and actual roadmap to figure out a strong strategy for accomplishing it. 50 | At my last job, our yearly goals were very aggressive, but I worked with my manager and the rest of my team to figure out a month-by-month strategy for meeting the year-end numbers. It was a real thrill to accomplish that.` 51 | }, 52 | { 53 | title: "What motivates you to apply for this particular role? ", 54 | type: 0, 55 | content: `When I was a sophomore, I really loved art and design. So I wanted to get a job for both art and science. That is the frontend postion, I think. 56 | I am happy that my creations come into direct contact with people, and I feel the greatest pride when I receive the best feedback from them. I am also motivated by working as part of a team to complete tasks and projects. 57 | I gain a great sense of job satisfaction when I know I have contributed to a team's goals or objectives.` 58 | }, 59 | 60 | { 61 | title: "Why are you looking for a job? ", 62 | type: 0, 63 | content: `I have worked at my last company for over 2 years and have gained a great amount of experience in project management. I’ve learned how to compete and succeed in such fast-moving and high-achieving environment. So I love my work and loanDepot. 64 | Due to the drop in the price of the blockchain, the company's budget was so much in the red, and the situation continued for several months that it was difficult to sustain. 65 | Team members, including myself, tried to recover it, but the results did not change much. 66 | I love everything about the company and really enjoyed working there. But reality made me look for new opportunities to achieve my goals. 67 | I love collaborating with my teammates, and it must be said that it is in my nature to immerse myself in work and find a new love for work. 68 | Furthermore, this position sounds like an exciting opportunity with a terrific company and an ideal match for my qualifications` 69 | }, 70 | { 71 | title: "SSN, DL, Linkedin", 72 | type: 0, 73 | content: `DL front: https://drive.google.com/file/d/19dV3fFuSlf5pYyQiafSKLxIK-QDijHvM/view?usp=share_link, 74 | DL back: https://drive.google.com/file/d/1BKM91nW3dNNGI2ZeWcwXg2NefYeeQJ1R/view?usp=share_link, 75 | SSN: https://drive.google.com/file/d/1t4Ezy7EaaWTElRrANWno9NO5GNcVxhmY/view?usp=share_link, 76 | LinkedIn: https://www.linkedin.com/in/john-michael-b57a18243/` 77 | }, 78 | { 79 | title: "What do you feel about the Los Angeles?", 80 | type: 0, 81 | content: `It’s amazing how many cultures can call Los Angeles home. As I drive through the city I can’t help but see signs the numerous areas of LA that make it so special; Chinatown, Silver Lake, The Arts District. 82 | Here brings people of all colors, cultures, and creeds together like nowhere else! 83 | People are so nice and the weather is just perfect all year round - always-sunny weather. I would like to live here for the rest of my life.` 84 | }, 85 | { 86 | title: "How did you work before?", 87 | type: 0, 88 | content: `At my previous company, I’ve learned a lot about how to make the most of a project and how to work closely with different team members. 89 | I’ve been proud of how each member was able to feel confident enough to make suggestions on ways to ensure the success of the project. In my role, I was responsible for directing a team of five and pulling together strategies and plans to develop the websites and maximize the efforts of the company. 90 | In one year, we made more than $200M in revenue, and I consider this to be the greatest achievement of my career. 91 | I am known for coming in early and staying late to finish important tasks and achieve results. 92 | I guess working for 10 hours a day for three hundred days did that to me. 93 | I always meet deadlines and help my teammates to meet theirs as well. 94 | In a word, I have enjoyed my work and found great successes in interpersonal and engineering skill.` 95 | }, 96 | { 97 | title: "Talk about the last time when you learned a lot.", 98 | type: 0, 99 | content: `I believe there is no end to learning. 100 | I think people learn as much as they know. Being content with myself and thinking I have nothing more to learn is probably the biggest failure of my life. 101 | The time I learned a lot was when I worked as a senior engineer at my previous company. 102 | From a technical point of view, I learned about clouding technology such as AWS, Microsoft Azure, data management like Elastic Search, and analysis methods. 103 | Personally, I have learned the art of raising many colleagues according to their positions and leading the business to success with their initiative and awareness.` 104 | }, 105 | { 106 | title: "Do you have experience in DevOps?", 107 | type: 0, 108 | content: `These include stronger ability to support operations, faster bug fixes, increased agility as a business, individual team agility increases, better collaboration and skill improvement. This is from googling. 109 | Personally, I think it's a crucial skill for a software engineer. I have used the DevOps tools such as Jenkins, Docker, Jira, AWS, CI/CD , git and agile methodology for project management. 110 | Stage 1: Idea & requirement collection. 111 | Stage 2: Development from the frontend to the backend 112 | Stage 3: Testing. 113 | Stage 4: Deployment on AWS or other. 114 | Stage 5: Operations. 115 | I think this is a higher level development area that increases the speed and quality of development and guarantees the life cycle of the project.` 116 | }, 117 | { 118 | title: "What do you know about this company?", 119 | type: 0, 120 | content: `` 121 | }, 122 | { 123 | title: "Tell me about a conflict you’ve faced at work and how you dealt with it.", 124 | type: 0, 125 | content: `In my previous job as a senior engineer, I performed tasks for two different managers. I found myself in a situation where both managers were demanding a lot of my time and resources and I was forced to say 'no' to some of their tasks or else I’d fall severely behind on the higher-priority tasks. 126 | 127 | At first, one of my managers was visibly upset. I quickly realized that I hadn’t done a good enough job of explaining the situation. I quickly asked to meet one-on-one and told the manager why I didn’t have as much time available as he thought. He immediately understood and I was able to avoid a bigger conflict. 128 | 129 | It turned out that neither manager realized how busy I was. They ended up speaking with each other and coming up with a plan that would lighten my workload so that I could continue to perform the most important tasks for both of them.` 130 | }, 131 | { 132 | title: "Give me an example of how you have worked on teams. What role did you play?", 133 | type: 0, 134 | content: `In my last job, I was frequently required to interact with many different groups in the company like finance, accounting, sales, customer service, and more. I’ve also worked on projects with five other colleagues in my own group. 135 | 136 | In those cases, I played the role of a specialist because I’m the only team member who is familiar with AWS and full stack development. So I provided expert insight into that area, and they handled the other areas. 137 | 138 | My understanding, based on reading the job description for this position, is that you need that same skill set in your group right now. Is that correct? And can you talk about what the scope of the project is.` 139 | }, 140 | { 141 | title: "Tell me about your last company.", 142 | type: 0, 143 | content: `loanDepot: 144 | loanDepot was established in 2010 and has hired for full-time, 100% remote jobs. 145 | The company is the nation’s second-largest nonbank consumer lender and the first nonbank lender to provide home, personal, and home equity loans. 146 | They provide technical design, estimation and implementation for user stories, take part in agile ceremonies, and provide technical design leadership on user stories. And I was responsible for the full stack development there and it's a good place to work. 147 | I love my company and love my work, so will I do for your company. 148 | 149 | Enplug: 150 | They've been focused on building the simplest, most stable digital signage technology on the market. 151 | Customer service is quick and very helpful, online service is very good. 152 | They were recruiting many engineers and I found that allowing customers to schedule calls directly on their support team's calendar improved 3 times as many people per day compared to direct phone support. 153 | At that time I have developed those platforms with my team and gave good feedbacks from the customers. 154 | It was a great place to work too.` 155 | }, 156 | { 157 | title: "Tell me about a joke, humor.", 158 | type: 0, 159 | content: `John had been undergoing tests for a serious health concern for several weeks. Finally it was the day for him to receive his test results. 160 | 161 | So he was sitting in his doctor’s office and he said, “Doc, I really need to know my test results! Not knowing is driving me crazy.“ 162 | His doctor reviewed at his notes again and then said, “Well John, there’s some good news and some bad news I’m afraid. Which one do you want first?” 163 | 164 | To which John replied, “I think I’d prefer the good news first. Yeah Doc, let me have the good news first!” 165 | 166 | “Well,” said the doctor, “I hear there are some amazing deals on cremations this week.“` 167 | }, 168 | { 169 | title: "What did you learn from the freelancing?", 170 | type: 0, 171 | content: `After 10 years of working full-time, suddenly freelancing didn't make sense at the very first time. 172 | Considering that there are some people with low skills among freelancers, I was a bit reluctant at first. 173 | However, in the process of working, there was a lot to learn from it. 174 | For example, I learned how to have a relationship with customers, what freelancers feel like, and to do lancing, you need to have knowledge in wide technical fields rather than a specific major. 175 | This is also very interesting, but I have made up my mind that if I want to do something big that I can contribute not only for myself but also for society, I have to work for a full-time job like yours. 176 | Even if it's not a career that I'm proud of, I think it's an experience of going through hardships that must have as an engineer. 177 | ` 178 | }, 179 | { 180 | title: "What are your main skills?", 181 | type: 0, 182 | content: `I specialize in Web and Decentralized applications, and in addition to front-end development, I am interested in Web Design, back-end development and GraphQL. 183 | My great performances are in TypeScript, JavaScript and its libraries and such as Angular, React, Redux, Web3.js, etc. 184 | I also have strong knowledge in Data Structure & Algorithm, which always helps me build robust and high-performance applications. 185 | --------- 186 | As for the egineering skills, I have an expertise in AWS, Agile methodology, CI/CD, Jira, GraphQL, Microsoft Azure, serverless technology . In a word, DevOps. 187 | So I have a knowledge of Java, Javascript, PHP for the server-side languages apart from frontend. 188 | Also interpersonal skills + communictation skills I would have more professionally later. 189 | Furthermore, I will be very fit for this position with: 190 | 1. Passion 191 | 2. Problem-solving skills 192 | 3. Confidence 193 | 4. Results-driven` 194 | }, 195 | { 196 | title: "what are your strengths and weakness?", 197 | type: 0, 198 | content: `I’ve never been one to give up, even on my personal life, and that personality trait has definitely transpired into my career. When I’m involved in a project, I like to feel like I actually contributed to it in a significant way and that’s what feeds my determination and focus. 199 | To state my strength and weakness can be a little confusing because both of the two concepts are same for me. My quality of being self-motivated. I can work hard and consistently to achieve a goal if that helps me in growing and learning. I can motivate myself to do a task even when there are multiple obstacles and I can complete it. 200 | However, my weakness is being over self-motivated because in that process I lose myself and get too goal oriented. If it is a team task then my self-goals become a burden for them and as a result, I come across clashes and group breakdowns sometimes. 201 | I have been working on this for the last few months where I set a limit for myself and for the team and try not to affect my goals and objectives becomes a pressure for the others. 202 | In a word, both my strength and weakness arise from the same quality.` 203 | }, 204 | { 205 | title: "What is your mistake you made?", 206 | type: 0, 207 | content: `This question is a bit difficult for me, because I have to expose my flaws. 208 | But I am honest with myself. I attach great importance to the work itself. 209 | I worked tirelessly to find myself in work and devoted a lot of time to it. 210 | As a result, I didn't have a life for my family, and I didn't feel warm love. 211 | I couldn't even keep my father's last appearance by his side. 212 | I'm 31 now and it's time to start a family, but I'm still a single. 213 | But without those devotion that lost such values, there would never be today's myself 214 | This is the biggest mistake I made and also the biggest thing I am proud of.` 215 | }, 216 | { 217 | title: "What is your work style?", 218 | type: 0, 219 | content: `I can do my best in a strong cooperative environment out of company members, and I can strive to achieve great goals while helping and learning from each other. 220 | I like a quiet environment when I work, but I really like to discuss new technologies and company roadmaps frequently. 221 | To point out my work style: 222 | passionate 223 | Result-drvien 224 | high-energy 225 | motivation. 226 | ` 227 | }, 228 | { 229 | title: "What is your management experience?", 230 | type: 0, 231 | content: `When I work in a group, I am motivated - even more motivated. In my experience, one person may spark my thoughts and encourage me to come up with a brand-new creative thinking or concept. 232 | And when I was working as a team leader, I used to let the members do the same project in cooperation rather than different projects in separation. 233 | It was good to bring members closer to each other and more motivational to pursue one goal.` 234 | }, 235 | { 236 | title: "What are you career goals over the next 3-5 years?", 237 | type: 0, 238 | content: `I hope to work as a senior software engineer for a company such as yours—one with a mission based on excellent communicating skills and technologies. Working as a senior software engineer for a company I believe in will prepare me to take on expanded team leadership responsibilities in the future, as those become available. 239 | To pursue those goals, I have set four steps. 240 | - Increase my expertise and training. I am trying to prepare myself as a competent senior engineer who owns frontend technology and further possesses clouding and backend technology. 241 | - Increase my income. Trying to balance life and business and increase income for a better future life. I will increase my income to over $12,000 per month on average. 242 | - Improve relationships with team members. I try to possess leadership skills in the process of cooperation with different team members. 243 | - Have a new experience. As an important core engineer of the technical team, I will have more experience in interpersonal relationships and in the technology stack.` 244 | }, 245 | { 246 | title: "Why don't you speak English fluently?", 247 | type: 0, 248 | content: `` 249 | }, 250 | { 251 | title: "What is your personality?", 252 | type: 0, 253 | content: `Team player, confident, Ambitious and friendly are three words I'd pick to describe myself.` 254 | }, 255 | { 256 | title: "Briefly summarize your recent contributions to either a web application or API service.", 257 | type: 0, 258 | content: `https://projectisla.co/ is my recent project. 259 | This site uses versatile search tools to explore our database of hospital information and hospital analytics. It creates a list or a map of hospitals that match the interests of customers near their location. 260 | This provides data, statistics, and analytics about more than 3,000 hospitals nationwide. 261 | Elasticsearch was used as a search engine for data processing. 262 | I used Django python framework for the backend and React for the frontend. 263 | Most of what I was responsible for in this project was frontend, REST api and admin dashboard. 264 | As for a development on my side, I have used React, material UI, Tailwind CSS, Axios for the REST api, react-saga for redux. 265 | This site consists of a landing page, a research component, a category page for displaying the hospital list, and a reservation page. 266 | I gave importance to the code optimization, responsiveness and the render speed. 267 | The most exciting thing was that I used some of react hook functions in this project such as useMemo, useCallback so that I can reduce unnecessary rendering into components. 268 | As a result, my customers gave me good feedbacks and reviews. 269 | Finally, I deploy this on the AWS EC2 after domain purchase.` 270 | }, 271 | { 272 | title: "Do you relocate?", 273 | type: 0, 274 | content: `Due to the pandmic and a current family obligation, I am not able to relocate at this time. However, I have experience working remotely and could be available to travel frequently to your other offices if these were viable options.` 275 | }, 276 | { 277 | title: "Why shouldn't we hire you?", 278 | type: 0, 279 | content: `If you're looking for someone to lead marketing, then I'm probably not the right fit for this position. I'm better suited to being an active participant in meetings than to lead marketing. But where I really shine is execution—so often, a meeting generates a lot of great ideas, but then none of them are completed. One of my strengths is following up on meeting tasks and completing projects in general.` 280 | }, 281 | { 282 | title: "What is your most important quality that makes you successful in your career?", 283 | type: 0, 284 | content: `1. Passion 285 | 2. Curious mind distinct from others 286 | 3. Problem-solving skills 287 | 4. Influencing Skills and high tech skills 288 | 5. Courage & Confidence 289 | 6. Results-driven` 290 | }, 291 | { 292 | title: "Are you feeling comfortable for working with a big team? ", 293 | type: 0, 294 | content: `I have a strong team spirit. Whether the company is big or small, it all looks like one thing to me. A team. 295 | I've been used to working in a team and working in cooperation for over 10 years, so I felt really lonely while lancing alone for the past 3 months. 296 | If I work in a team environment, I can make a great contribution to the company and play an active role in promoting cooperation among team members.` 297 | }, 298 | { 299 | title: "Why should we hire you? ", 300 | type: 0, 301 | content: `Based on what you've said and from the research I've done, your company is looking for a frontend developer who is both strong in interpersonal skills and tech skills. I believe my experience aligns with your company’s requirements and makes me a great fit. I'm an effective developer who is skilled in modern frontend technologies, having an eye on design. I'm also fluent in several relevant software programs, including backend systems and blockchain technologies. I'd love to bring my diverse skill set to your company.` 302 | }, 303 | { 304 | title: "What additional skills and experiences do you think will help you in this role?", 305 | type: 0, 306 | content: `Apart from the JS, TS, React, I specialized in decentralized applications, GraphQL, Microsoft Azure, serverless technology and AWS. 307 | I have developed micro services for the hotel booking system at the last company. 308 | Furthermore, I will be very fit for this position with: 309 | 1. Passion 310 | 2. Curious mind distinct from others 311 | 3. Problem-solving skills 312 | 4. Influencing Skills and high tech skills 313 | 5. Courage & Confidence 314 | 6. Results-driven` 315 | }, 316 | { 317 | title: "What are you usually doing when you are free? ", 318 | type: 0, 319 | content: `Because I sit at a computer all day and work, my health is a major concern. I visit the gym three times a week to take care of my health. I particularly enjoy basketball and swimming. Exercise helps me maintain a positive mindset, it reduces stress, and it increases concentration levels. I also enjoy spending time with my friends, family. It is usually a great talk because it taught me the skill of taking ownership of difficult challenges in my life, and how to achieve my goals.` 320 | }, 321 | { 322 | title: "What is difficult for you to answer in the interview? ", 323 | type: 0, 324 | content: `` 325 | }, 326 | { 327 | title: "What do you like most while working at the company? ", 328 | type: 0, 329 | content: `` 330 | }, 331 | { 332 | title: "What do you hate most while working at the company? ", 333 | type: 0, 334 | content: `` 335 | } 336 | ]; -------------------------------------------------------------------------------- /src/data/react.js: -------------------------------------------------------------------------------- 1 | export const react = [ 2 | { 3 | title: "How does React work?", 4 | type: 1, 5 | content: `React creates a virtual DOM.\nWhen state changes in a component it firstly runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. 6 | The second step is reconciliation, where it updates the DOM with the results of diff.` 7 | }, 8 | { 9 | title: "What is React?", 10 | type: 1, 11 | content: `React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. React’s core purpose is to build UI components; it is often referred to as just the “V” (View) in an “MVC” architecture.` 12 | }, 13 | { 14 | title: "Difference between class components and functional components?", 15 | type: 1, 16 | content: `: 17 | Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods. 18 | Class components extend from React.Component. 19 | In here I have to use this keyword to access the props and functions that I declare inside the class components. 20 | : 21 | Functional Components are simpler comparing to class-based functions. 22 | Functional Components mainly focuses on the UI of the application, not on the behavior. 23 | To be more precise these are basically render function in the class component. 24 | Functional Components can have state and mimic lifecycle events using Reach Hooks` 25 | }, 26 | { 27 | title: "What is Context API in ReactJS?", 28 | type: 1, 29 | content: `Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. Using context, I can avoid passing props through intermediate elements.` 30 | }, 31 | { 32 | title: "What are props in React?", 33 | type: 1, 34 | content: `Props are inputs to a React component. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. i.e, They are data passed down from a parent component to a child component. 35 | 36 | The primary purpose of props in React is to provide following component functionality: 37 | Pass custom data to my React component. 38 | Trigger state changes. 39 | Use via this.props.reactProp inside component's render() method. 40 | This reactProp (or whatever I came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.` 41 | }, 42 | { 43 | title: "What is the use of refs? ", 44 | type: 1, 45 | content: `Refs provide a way to access DOM nodes or React elements created in the render method. They should be avoided in most cases, however, they can be useful when I need direct access to DOM element or an instance of a component. 46 | There are a few good use cases for refs: 47 | -Managing focus, text selection, or media playback. 48 | -Triggering imperative animations. 49 | -Integrating with third-party DOM libraries. 50 | Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.` 51 | }, 52 | { 53 | title: "What are the advantages of ReactJS?", 54 | type: 1, 55 | content: ` 56 | 1. Increases the application’s performance with Virtual DOM 57 | 2. JSX makes code is easy to read and write 58 | 3. It renders both on client and server side 59 | 4. Easy to integrate with other frameworks (Angular, BackboneJS) since it is only a view library 60 | 5. Easy to write UI Test cases and integration with tools such as JEST.` 61 | }, 62 | { 63 | title: "What are React Hooks?", 64 | type: 1, 65 | content: `Hooks are a new addition in React 16.8. They let I use state and other React features without writing a class. With Hooks, I can extract stateful logic from a component so it can be tested independently and reused. Hooks allow I to reuse stateful logic without changing my component hierarchy. This makes it easy to share Hooks among many components or with the community.` 66 | }, 67 | { 68 | title: "How would you write an inline style in React?", 69 | type: 1, 70 | content: `
` 71 | }, 72 | { 73 | title: "What are the major features of ReactJS?", 74 | type: 1, 75 | content: `The major features of ReactJS are as follows, 76 | -It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive. 77 | -Supports server-side rendering 78 | -Follows Unidirectional data flow or data binding 79 | -Uses reusable/composable UI components to develop the view` 80 | }, 81 | { 82 | title: "What are the advantages of using React?", 83 | type: 1, 84 | content: `-It is easy to know how a component is rendered, I just need to look at the render function. 85 | -JSX makes it easy to read the code of my components. It is also really easy to see the layout, or how -components are plugged/combined with each other. 86 | -I can render React on the server-side. This enables improves SEO and performance. 87 | -It is easy to test. 88 | -I can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.` 89 | }, 90 | { 91 | title: "What is the difference between state and props?", 92 | type: 1, 93 | content: `-The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events. 94 | -Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.` 95 | }, 96 | { 97 | title: "What is the difference between a Presentational component and a Container component?", 98 | type: 1, 99 | content: `-Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state. 100 | -Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They call Flux actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.` 101 | }, 102 | { 103 | title: "What are refs used for in React?", 104 | type: 1, 105 | content: `Refs are an escape hatch which allow I to get direct access to a DOM element or an instance of a component. In order to use them I add a ref attribute to my component whose value is a callback function which will receive the underlying DOM element or the mounted instance of the component as its first argument. 106 | It’s often misconstrued that I need to use a class component in order to use refs, but refs can also be used with functional components by leveraging closures in JavaScript.` 107 | }, 108 | { 109 | title: "What's the difference between a Controlled component and an Uncontrolled one in React?", 110 | type: 1, 111 | content: `-A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. I could also call this a "dumb component". 112 | -A Uncontrolled Component is one that stores its own state internally, and I query the DOM using a ref to find its current value when I need it. This is a bit more like traditional HTML. 113 | Most native React form components support both controlled and uncontrolled usage. 114 | In most (or all) cases I should use controlled components.` 115 | }, 116 | { 117 | title: "What are Controlled components in ReactJS?", 118 | type: 1, 119 | content: `A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. I could also call this a "dumb component".` 120 | }, 121 | { 122 | title: "What is state in React?", 123 | type: 1, 124 | content: `State of a component is an object that holds some information that may change over the lifetime of the component. I should always try to make our state as simple as possible and minimize the number of stateful components.` 125 | }, 126 | { 127 | title: "What does it mean for a component to be mounted in React?", 128 | type: 1, 129 | content: `It has a corresponding element created in the DOM and is connected to that.` 130 | }, 131 | { 132 | title: "What are Fragments in React?", 133 | type: 1, 134 | content: `It's common pattern in React which is used for a component to return multiple elements. Fragments let I group a list of children without adding extra nodes to the DOM. shorter syntax: <>` 135 | }, 136 | { 137 | title: "When rendering a list what is a key and what is it's purpose?", 138 | type: 1, 139 | content: `Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. 140 | Most often I would use IDs from my data as keys. When I don't have stable IDs for rendered items, I may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.` 141 | }, 142 | { 143 | title: "How to create refs in React?", 144 | type: 1, 145 | content: `Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order to use refs throughout the component, just assign the ref to the instance property with in constructor.I can also use it in functional components with the help of closures. And can use useRef from the hook functions.` 146 | }, 147 | { 148 | title: "What is useState() in React?", 149 | type: 1, 150 | content: `useState is one of build-in react hooks. useState(0) returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state. 151 | I can use the setCounter method to update the state of count anywhere - In this case I are using it inside of the setCount function where I can do more things; the idea with hooks is that I are able to keep our code more functional and avoid class based components if not desired/needed.` 152 | }, 153 | { 154 | title: "What are Stateful components in React?", 155 | type: 1, 156 | content: `If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These Stateful components are always class components and have a state that gets initialized in the constructor.` 157 | }, 158 | { 159 | title: "What is JSX?", 160 | type: 1, 161 | content: `JSX is a syntax notation for JavaScript XML (XML-like syntax extension to ECMAScript). It stands for JavaScript XML. It provides expressiveness of JavaScript along with HTML like template syntax. For example, in React, I can write html like code and it returns as javascript function to the render function.` 162 | }, 163 | { 164 | title: "What are the limitations of React?", 165 | type: 1, 166 | content: `1.React is just a view library, not a full-blown framework 167 | 2.There is a learning curve for beginners who are new to web development. 168 | 3.Integrating React.js into a traditional MVC framework requires some additional configuration 169 | 4.The code complexity increases with inline templating and JSX. 170 | 5.Too many smaller components leading to over-engineering or boilerplate` 171 | }, 172 | { 173 | title: "What are Stateless components in React?", 174 | type: 1, 175 | content: `If the behaviour is independent of its state then it can be a stateless component. I can use either a function or a class for creating stateless components. But unless I need to use a lifecycle hook in my components, I should go for stateless functional components. 176 | There are a lot of benefits if I decide to use stateless functional components here; they are easy to write, understand, and test, and I can avoid the THIS keyword altogether.` 177 | }, 178 | { 179 | title: "How is React different from AngularJS (1.x)?", 180 | type: 1, 181 | content: `For example, AngularJS (1.x) approaches building an application by extending HTML markup and injecting various constructs (e.g. Directives, Controllers, Services) at runtime. As a result, AngularJS is very opinionated about the greater architecture of my application — these abstractions are certainly useful in some cases, but they come at the cost of flexibility. 182 | By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an application’s architecture. This allows a developer an incredible amount of flexibility in choosing the architecture they deem “best” — though it also places the responsibility of choosing (or building) those parts on the developer.` 183 | }, 184 | { 185 | title: "What is the difference between state and props?", 186 | type: 1, 187 | content: `Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. i.e, 188 | - Props get passed to the component similar to function parameters 189 | - State is managed within the component similar to variables declared within a function.` 190 | }, 191 | { 192 | title: "What are two types of components in ReactJS?", 193 | type: 1, 194 | content: `There are two possible ways to create ReactJS Components. 195 | 1. Functional components: This is the simplest way to create ReactJS components. It accepts props as an Object and returns ReactJS elements. I call it as “functional” because those are pure JavaScript functions. 196 | 2. Class components: I can also use Es6 class to define component. It extends from React.Component` 197 | }, 198 | { 199 | title: "What is the purpose of callback function as an argument of setState?", 200 | type: 1, 201 | content: `The callback function is invoked when setState finished and the component gets rendered. Since setState is asynchronous, the callback function is used for any post action. But it'd better use lifecycle method rather this callback function.` 202 | }, 203 | { 204 | title: "What are portals in React and when do I need them?", 205 | type: 1, 206 | content: `Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 207 | Sometimes it’s useful to insert a child into a different location in the DOM: 208 | A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but I need the child to visually “break out” of its container.` 209 | }, 210 | { 211 | title: "What are advantages of using React Hooks?", 212 | type: 1, 213 | content: `Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components. 214 | Hooks don’t work inside classes (because they let I use React without classes). By using them, I can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount. Instead, I will use built-in hooks like useEffect . 215 | ` 216 | }, 217 | { 218 | title: "What happens during the lifecycle of a React component?", 219 | type: 1, 220 | content: `At the highest level, React components have lifecycle events that fall into three general categories: 221 | 1. Initialization 222 | 2. State/Property Updates 223 | 3. Destruction` 224 | }, 225 | { 226 | title: "What is the difference between Component and Container in Redux?", 227 | type: 1, 228 | content: `- Component is part of the React API. A Component is a class or function that describes part of a React UI. 229 | - Container is an informal term for a React component that is connected to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.` 230 | }, 231 | { 232 | title: "What are inline conditional expressions in ReactJS?", 233 | type: 1, 234 | content: `I can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, I can also embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator(&&).` 235 | }, 236 | { 237 | title: "What is Reconciliation in ReactJS?", 238 | type: 1, 239 | content: `When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.` 240 | }, 241 | { 242 | title: "What is the purpose of using super constructor with props argument in React?", 243 | type: 1, 244 | content: `A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in my child constructors.` 245 | }, 246 | { 247 | title: "What happens when you call setState?", 248 | type: 1, 249 | content: `The first thing React will do when setState is called is merge the object I passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state. 250 | To do this, React will construct a new tree of React elements (which I can think of as an object representation of my UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree. 251 | By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.` 252 | }, 253 | { 254 | title: "What is the difference between Element and Component in ReactJS?", 255 | type: 1, 256 | content: `An element is a plain object describing what I want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. 257 | Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output. JSX transpiled as createElement at the end.` 258 | }, 259 | { 260 | title: "What are Higher-Order Components (HOC) in React?", 261 | type: 1, 262 | content: `A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature I call them as “pure’ components” because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. 263 | 1. Code reuse, logic and bootstrap abstraction 264 | 2. Render High jacking 265 | 3. State abstraction and manipulation 266 | 4. Props manipulation` 267 | }, 268 | { 269 | title: "How to call loading function with React useEffect only once?", 270 | type: 1, 271 | content: `If I only want to run the function given to useEffect after the initial render, I can give it an empty array [] as the second argument.` 272 | }, 273 | { 274 | title: "How to access DOM elements in React?", 275 | type: 1, 276 | content: `One of the useful application of the useRef() hook is to access DOM elements. This is performed in 3 steps: 277 | 1. Define the reference to access the element const elementRef = useRef(); 278 | 2. Assign the reference to ref attribute of the element:
; 279 | 3. After mounting, elementRef.current points to the DOM element.` 280 | }, 281 | { 282 | title: "Name the different lifecycle methods for a class components", 283 | type: 1, 284 | content: `- componentWillMount- this is most commonly used for App configuration in my root component. 285 | - componentDidMount - here I want to do all the setup I couldn’t do without a DOM, and start getting all the data I need. Also if I want to set up eventListeners etc. this lifecycle hook is a good place to do that. 286 | - componentWillReceiveProps - this lifecyclye acts on particular prop changes to trigger state transitions. 287 | shouldComponentUpdate - if you’re worried about wasted renders shouldComponentUpdate is a great place to improve performance as it allows I to prevent a rerender if component receives new prop. 288 | - shouldComponentUpdate should always return a boolean and based on what this is will determine if the component is rerendered or not. 289 | - componentWillUpdate - rarely used. It can be used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props). 290 | - componentDidUpdate - also commonly used to update the DOM in response to prop or state changes. 291 | - componentWillUnmount - here I can cancel any outgoing network requests, or remove all event listeners associated with the component.` 292 | }, 293 | { 294 | title: "What is {this.props.children} and when you should use it?", 295 | type: 1, 296 | content: `I can use props.children on components that represent 'generic boxes' and that don’t know their children ahead of time. It is used to display whatever I include between the opening and closing tags when invoking a component.` 297 | }, 298 | { 299 | title: "How would you prevent a component from rendering in React?", 300 | type: 1, 301 | content: `Returning null from a component's render method does not affect the firing of the component's lifecycle methods.` 302 | }, 303 | { 304 | title: "What's the typical pattern for rendering a list of components from an array in React?", 305 | type: 1, 306 | content: `Call map on an array with an arrow function that executes for each array element, possibly outputting a React component for each.` 307 | }, 308 | { 309 | title: "What are Pure Components?", 310 | type: 1, 311 | content: `PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you. 312 | When props or state changes, PureComponent will do a shallow comparison on both props and state. Component, on the other hand, won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.` 313 | }, 314 | { 315 | title: "What's the typical flow of data like in a React + Redux app?", 316 | type: 1, 317 | content: `Callback from UI component dispatches an action with a payload, which then is intercepted in a reducer, possibly producing a new application state, which is then propagated down through the tree of components in the application from the Redux store.` 318 | }, 319 | { 320 | title: "What are some limitations of things you shouldn't do in the component's render method in React?", 321 | type: 1, 322 | content: `I cannot modify the component's state (with setState), nor interact with the browser (do that in componentDidMount). Render should be a pure function.` 323 | }, 324 | { 325 | title: "How to bind methods or event handlers in JSX callbacks?", 326 | type: 1, 327 | content: `There are 3 possible ways to achieve, 328 | 1. Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies for ReactJS event handlers defined as class methods. Normally I bind them in constructor as follows, 329 | 2. Public class fields syntax: If I don’t like to use bind approach then public class fields syntax can be used to correctly bind callbacks, 330 | 3. Arrow functions in callbacks: I can use arrow functions directly in the callbacks as below` 331 | }, 332 | { 333 | title: "What is prop drilling and how can you avoid it?", 334 | type: 1, 335 | content: `When building a React application, there is often the need for a deeply nested component to use data provided by another component that is much higher in the hierarchy. The simplest approach is to simply pass a prop from each component to the next in the hierarchy from the source component to the deeply nested component. This is called prop drilling. 336 | The primary disadvantage of prop drilling is that components that should not otherwise be aware of the data become unnecessarily complicated and are harder to maintain. 337 | To avoid prop drilling, a common approach is to use React context. This allows a Provider component that supplies data to be defined, and allows nested components to consume context data via either a Consumer component or a useContext hook.` 338 | }, 339 | { 340 | title: "What is the point of shouldComponentUpdate() method?", 341 | type: 1, 342 | content: `It's used for performance reasons, for example if the implementor of a component knows for sure that a particular property change does not necessitate a re-render, they could return false from this method and skip the re-render.` 343 | }, 344 | { 345 | title: "What are forward refs?", 346 | type: 1, 347 | content: `Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.` 348 | }, 349 | { 350 | title: "What do these three dots (...) in React do? Spread notation", 351 | type: 1, 352 | content: `It was added in ES2018 (spread for arrays/iterables was earlier, ES2015). Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since I can't modify state directly:` 353 | }, 354 | { 355 | title: "What are the different phases of ReactJS component lifecycle?", 356 | type: 1, 357 | content: `There are four different phases of React component’s lifecycle: 358 | 1. : In this phase react component prepares setting up the initial state and default props. 359 | 2. Mounting: The react component is ready to mount in the browser DOM. This phase covers componentWillMount and componentDidMount lifecycle methods. 360 | 3. Updating: In this phase, the component get updated in two ways, sending the new props and updating the state. This phase covers shouldComponentUpdate, componentWillUpdate and componentDidUpdate lifecycle methods. 361 | 4. Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include componentWillUnmount lifecycle method.` 362 | }, 363 | { 364 | title: "What is Key and benefit of using it in lists?", 365 | type: 1, 366 | content: `A key is a special string attribute I need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed. When I don’t have stable IDs for rendered items, I may use the item index as a key as a last resort: 367 | I don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state 368 | If I extract list item as separate component then apply keys on list component instead li tag. 369 | There will be a warning in the console if the key is not present on list items.` 370 | }, 371 | { 372 | title: "What's the difference between an Element and a Component in React?", 373 | type: 1, 374 | content: `- Elements are the fundamental building blocks of React, and describe what I want to see on the screen. They are just simple JS objects with props, key, ref, and type properties, whereas 375 | - Components have a render method and optionally accept inputs.` 376 | }, 377 | { 378 | title: "What is the difference between ShadowDOM and VirtualDOM?", 379 | type: 1, 380 | content: `- Virtual DOM, 381 | 382 | Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. Virtual DOM also allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM. 383 | - Shadow DOM, 384 | 385 | Shadow dom is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. An entire web application of arbitrary complexity can be added to a page by an import and but also simpler reusable and composable components can be implemented as custom elements where the internal representation is hidden in the shadow DOM like .` 386 | }, 387 | { 388 | title: "Why do class methods need to be bound to a class instance?", 389 | type: 1, 390 | content: `In JavaScript, the value of this changes depending on the current context. Within React class component methods, developers normally expect this to refer to the current instance of a component, so it is necessary to bind these methods to the instance. Normally this is done in the constructor.` 391 | }, 392 | { 393 | title: "What are Stateless components in React?", 394 | type: 1, 395 | content: `Stateless components (a flavor of “reusable” components) are nothing more than pure functions that render DOM based solely on the properties provided to them. 396 | This component has no need for any internal state — let alone a constructor or lifecycle handlers. The output of the component is purely a function of the properties provided to it.` 397 | }, 398 | { 399 | title: "What is children prop?", 400 | type: 1, 401 | content: `Children is a prop (this.prop.children) that allow I to pass components as data to other components, just like any other prop I use. 402 | There are a number of methods available in the React API to work with this prop. These include: 403 | - React.Children.map, 404 | - React.Children.forEach, 405 | - React.Children.count, 406 | - React.Children.only, 407 | - React.Children.toArray.` 408 | }, 409 | { 410 | title: "Why React uses className over class attribute?", 411 | type: 1, 412 | content: `class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of class.` 413 | }, 414 | { 415 | title: "What does shouldComponentUpdate do and why is it important?", 416 | type: 1, 417 | content: `What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of setState reconciliation process for certain components (and their child components). If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.` 418 | }, 419 | { 420 | title: "What is Lifting State Up in ReactJS?", 421 | type: 1, 422 | content: `When several components need to share the same changing data then it is recommended to lifting the shared state up to their closest common ancestor. For example, if two child components sharing the same data from its parent then move the state to parent instead of maintaining the local state inn both child components.` 423 | }, 424 | { 425 | title: "Why we should not update state directly?", 426 | type: 1, 427 | content: `If I try to update state directly then it won’t re-render the component. Instead use setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering. The only place I can assign the state is constructor.` 428 | }, 429 | { 430 | title: "What's the difference between useRef and createRef?", 431 | type: 1, 432 | content: `The difference is: 433 | - createRef will always create a new ref. In a class-based component, I would typically put the ref in an instance property during construction (e.g. this.input = createRef()). I don't have this option in a function component. 434 | - useRef takes care of returning the same ref each time as on the initial rendering. 435 | ` 436 | }, 437 | { 438 | title: "What is StrictMode in React?", 439 | type: 1, 440 | content: `React's StrictMode is sort of a helper component that will help I write better react components, I can wrap a set of components with and it'll basically: 441 | - Verify that the components inside are following some of the recommended practices and warn I if not in the console. 442 | - Verify the deprecated methods are not being used, and if they're used strict mode will warn I in the console. 443 | - Help I prevent some side effects by identifying potential risks.` 444 | }, 445 | { 446 | title: "What is the difference between createElement and cloneElement?", 447 | type: 1, 448 | content: `- createElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI). 449 | - cloneElement is used in order to clone an element and pass it new props. They nailed the naming on these two.` 450 | }, 451 | { 452 | title: "What is the significance of keys in ReactJS?", 453 | type: 1, 454 | content: `Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).` 455 | }, 456 | { 457 | title: "What would be the common mistake of function being called every time the component renders?", 458 | type: 1, 459 | content: `I need to make sure that function is not being called while passing the function as a parameter. Instead, pass the function itself without parenthesis:` 460 | }, 461 | { 462 | title: "Are you familiar with Flux in the context of React?", 463 | type: 1, 464 | content: `Flux is an architectural pattern that enforces unidirectional data flow — its core purpose is to control derived data so that multiple components can interact with that data without risking pollution. 465 | The Flux pattern is generic; it’s not specific to React applications, nor is it required to build a React app. However, Flux is commonly used by React developers because React components are declarative — the rendered UI (View) is simply a function of state (Store data). 466 | In the Flux pattern, the Store is the central authority for all data; any mutations to the data must occur within the store. Changes to the Store data are subsequently broadcast to subscribing Views via events. Views then update themselves based on the new state of received data. 467 | To request changes to any Store data, Actions may be fired. These Actions are controlled by a central Dispatcher; Actions may not occur simultaneously, ensuring that a Store only mutates data once per Action. 468 | The strict unidirectional flow of this Flux pattern enforces data stability, reducing data-related runtime errors throughout an application.` 469 | }, 470 | { 471 | title: "What is the difference between HTML and React event handling?", 472 | type: 1, 473 | content: `1. In HTML, the event name should be in lowercase. Whereas in ReactJS it follows camelCase convention, 474 | 2. In HTML, I can return false to prevent default behavior, 475 | 3. Whereas in ReactJS I must call preventDefault explicitly,` 476 | }, 477 | { 478 | title: "What are Error Boundaries in ReactJS?", 479 | type: 1, 480 | content: `Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info). After that use it as a regular component.` 481 | }, 482 | { 483 | title: "What are Uncontrolled components?", 484 | type: 1, 485 | content: `The Uncontrolled Component are the one that stores its own state internally, and I query the DOM using a ref to find its current value when I need it. This is a bit more like traditional HTML For example, in the below UserProfile component, the name input accessed using ref as below, In most cases, it is recommend using controlled components to implement forms.` 486 | }, 487 | { 488 | title: "What's wrong with using Context in React?", 489 | type: 1, 490 | content: `- Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. 491 | - If I only want to avoid passing some props through many levels, component composition is often a simpler solution than context. 492 | It might feel redundant to pass down the user and avatarSize props through many levels if in the end only the Avatar component really needs it. It’s also annoying that whenever the Avatar component needs more props from the top, I have to add them at all the intermediate levels too.` 493 | }, 494 | { 495 | title: "What is Components Composition in React?", 496 | type: 1, 497 | content: `Sometimes we think about components as being “special cases” of other components. For example, we might say that a WelcomeDialog is a special case of Dialog. 498 | In React, this is also achieved by components composition, where a more “specific” component renders a more “generic” one and configures it with props:` 499 | }, 500 | { 501 | title: "What does Batching mean in ReactJS?", 502 | type: 1, 503 | content: `Batching is nothing but grouping React multiple state updates together into a single render state to achieve better computational performance. Until React 18, we only batched updates during the React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default.` 504 | }, 505 | { 506 | title: "What are the advantages of Batching in ReactJS?", 507 | type: 1, 508 | content: `- Batching is great for performance because it avoids unnecessary re-renders. 509 | - Batching also prevents my component from rendering half-finished states where only one state variable was updated, which may cause bugs. 510 | - Another reason to use batching is when the web application grows, the number of nested components will increase. Therefore, if a parent component executes an unbatched state updated, the entire component tree will be re-rendered per state update that is expensive.` 511 | }, 512 | { 513 | title: "Which lifecycle methods of class component is replaced by useEffect in functional component?", 514 | type: 1, 515 | content: `The lifecyce methods replaced by useEffect Hooks of functional component are componentDidMount(), componentDidUpdate(), and componentWillUnmount(). 516 | 517 | - componentDidMount: is equivalent for running an effect once. 518 | - componentDidUpdate: is equivalent for running effects when things change. 519 | - componentWillUnmount: To run a hook as the component is about to unmount, we just have to return a function from the useEffect Hook` 520 | }, 521 | { 522 | title: "Compare useState and useReducer implementations", 523 | type: 1, 524 | content: `- useState updates state with setState, while useReducer with dispatch function. 525 | - useState passes down all the setState custom helper functions, while useReducer passes down just the dispatch - function. 526 | - useState needs to wrap functions in useCallback(if we want to memorize them), while dispatch function is - already memorized. 527 | - useState easier to write, useReducer is harder to implement and needs more logic to be coded.` 528 | }, 529 | { 530 | title: "Do React Hooks cover all use cases for class components?", 531 | type: 1, 532 | content: `No, The following methods have not been introduced in Hooks yet: 533 | - getSnapshotBeforeUpdate 534 | - getDerivedStateFromError 535 | - componentDidCatch` 536 | }, 537 | { 538 | title: "How can I make use of Error Boundaries in functional React components?", 539 | type: 1, 540 | content: `As of v16.2.0, there's no way to turn a functional component into an error boundary. The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout my application. 541 | 542 | Also bear in mind that try/catch blocks won't work on all cases. If a component deep in the hierarchy tries to update and fails, the try/catch block in one of the parents won't work -- because it isn't necessarily updating together with the child. 543 | A few third party packages on npm implement error boundary hooks.` 544 | }, 545 | { 546 | title: "When would you use useRef?", 547 | type: 1, 548 | content: `- To store a ref to DOM elements so I can later do something with them: useRef(null) 549 | - To store values without triggering re-renders: useRef()` 550 | }, 551 | { 552 | title: "How would you pass data from child to parent component in React?", 553 | type: 1, 554 | content: `Often, several components need to reflect the same changing data. In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called lifting state up. 555 | A common technique for these situations is to lift the state up to the first common ancestor of all the components that need to use the state (i.e. the PageComponent in this case) and pass down the state and state-altering functions to the child components as props.` 556 | }, 557 | { 558 | title: "What is the purpose of super(props)?", 559 | type: 1, 560 | content: `When I pass props to super, the props get assigned to this. Passing or not passing props to super has no effect on later uses of this.props outside constructor. That is render, shouldComponentUpdate, or event handlers always have access to it.` 561 | }, 562 | { 563 | title: "Explain the Virtual DOM concept in React", 564 | type: 1, 565 | content: `In React, each of my components have a state. This state is like an observable I might find in knockout or other MVVM style libraries. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. 566 | Dirty checking is slower than observables because I must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering. 567 | The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking my data. I could re-render using a virtual DOM with or without dirty checking. With ReactJS, each time a change is triggered (by a query or a user’s action, for instance), the entire virtual DOM is updated. 568 | ReactJS keeps two versions of the virtual DOM in memory — an updated virtual DOM and a copy made before the update. After the update, ReactJS compares these two versions to find the elements that have changed. 569 | Then it updates only the part of the real DOM that has changed. 570 | There is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not my data has changed.` 571 | }, 572 | { 573 | title: "Describe Flux vs MVC?", 574 | type: 1, 575 | content: `Traditional MVC patterns have worked well for separating the concerns of data (Model), UI (View) and logic (Controller) — but MVC architectures frequently encounter two main problems: 576 | - Poorly defined data flow: The cascading updates which occur across views often lead to a tangled web of events which is difficult to debug. 577 | - Lack of data integrity: Model data can be mutated from anywhere, yielding unpredictable results across the UI. 578 | With the Flux pattern complex UIs no longer suffer from cascading updates; any given React component will be able to reconstruct its state based on the data provided by the store. The Flux pattern also enforces data integrity by restricting direct access to the shared data. 579 | ` 580 | }, 581 | { 582 | title: "Can you force a React component to rerender without calling setState?", 583 | type: 1, 584 | content: `In my component, I can call this.forceUpdate() to force a rerender. Another way is this.setState(this.state); 585 | forceUpdate should be avoided because it deviates from a React mindset. The React docs cite an example of when forceUpdate might be used: 586 | By default, when my component's state or props change, my component will re-render. However, if these change implicitly (eg: data deep within an object changes without changing the object itself) or if my render() method depends on some other data, I can tell React that it needs to re-run render() by calling forceUpdate().` 587 | }, 588 | { 589 | title: "Why does React use SyntheticEvents?", 590 | type: 1, 591 | content: `React implements a synthetic events system that brings consistency and high performance to React apps and interfaces. It achieves consistency by normalizing events so that they have the same properties across different browsers and platforms. 592 | A synthetic event is a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. 593 | It achieves high performance by automatically using event delegation. In actuality, React doesn’t attach event handlers to the nodes themselves. Instead, a single event listener is attached to the root of the document. When an event is fired, React maps it to the appropriate component element.` 594 | }, 595 | { 596 | title: "How would you go about investigating slow React application rendering?", 597 | type: 1, 598 | content: `One of the most common issues in React applications is when components re-render unnecessarily. There are two tools provided by React that are helpful in these situations: 599 | - React.memo(): This prevents unnecessary re-rendering of function components 600 | - PureComponent: This prevents unnecessary re-rendering of class components 601 | Both of these tools rely on a shallow comparison of the props passed into the component—if the props have not changed, then the component will not re-render. While both tools are very useful, the shallow comparison brings with it an additional performance penalty, so both can have a negative performance impact if used incorrectly. By using the React Profiler, performance can be measured before and after using these tools to ensure that performance is actually improved by making a given change. 602 | ` 603 | }, 604 | { 605 | title: "What's a Pure Functional Component in React?", 606 | type: 1, 607 | content: `A function is said to be pure if: 608 | - Its return value is only determined by its input values 609 | - Its return value is always the same for the same input values 610 | A React component is considered pure if it renders the same output for the same state and props. 611 | With React.memo(), I can create memoized functional components that bail out of rendering on unnecessary updates using shallow comparison of props.` 612 | }, 613 | { 614 | title: "What is the second argument that can optionally be passed to setState and what is its purpose?", 615 | type: 1, 616 | content: `A callback function which will be invoked when setState has finished and the component is re-rendered. 617 | Something that’s not spoken of a lot is that setState is asynchronous, which is why it takes in a second callback function. Typically it’s best to use another lifecycle method rather than relying on this callback function, but it’s good to know it exists.` 618 | }, 619 | { 620 | title: "When is it important to pass props to super(), and why?", 621 | type: 1, 622 | content: `The only one reason when one needs to pass props to super() is when I want to access this.props in constructor. passing or not passing props to super has no effect on later uses of this.props outside constructor.` 623 | }, 624 | { 625 | title: "Why would you need to bind event handlers to this?", 626 | type: 1, 627 | content: `Binding is not something that is specifc to React, but rather how this works in Javascript. When I define a component using an ES6 class, a common pattern is for an event handler to be a method on the class. In JavaScript, class methods are not bound by default. If I forget to bind this.someEventHandler and pass it to onChange, this will be undefined when the function is actually called. 628 | Generally, if I refer to a method without () after it, such as onChange={this.someEventHandler}, I should bind that method.` 629 | }, 630 | { 631 | title: "What is the difference between using constructor vs getInitialState in React?", 632 | type: 1, 633 | content: `The difference between constructor and getInitialState is the difference between ES6 and ES5 itself. I should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.` 634 | }, 635 | { 636 | title: "Why doesn't this.props.children.map work?", 637 | type: 1, 638 | content: `this.props.children is an opaque data structure. It can be either an array or a single element. In my case, this.props.children is probably a single element, which is why the .map() method is undefined. 639 | I should use the React.Children API when manipulating the children prop.` 640 | }, 641 | { 642 | title: "How to create Props Proxy for HOC component?", 643 | type: 1, 644 | content: `I can add/edit props passed to the Component as a props proxy` 645 | }, 646 | { 647 | title: "How to conditionally add attributes to React components?", 648 | type: 1, 649 | content: `For certain attributes, React is intelligent enough to omit the attribute if the value I pass to it is not truthy. I can also use && operator.` 650 | }, 651 | { 652 | title: "Does React re-render all components and sub components every time setState is called?", 653 | type: 1, 654 | content: `yes. 655 | There is a method boolean shouldComponentUpdate(object nextProps, object nextState), each component has this method and it's responsible to determine "should component update (run render function)?" every time I change state or pass new props from parent component. 656 | I can write my own implementation of shouldComponentUpdate method for my component, but default implementation always returns true - meaning always re-run render function.` 657 | }, 658 | { 659 | title: "Describe how events are handled in React", 660 | type: 1, 661 | content: `In order to solve cross browser compatibility issues, my event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers. 662 | What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM. 663 | ` 664 | }, 665 | { 666 | title: "How to apply validation on props in ReactJS?", 667 | type: 1, 668 | content: `When the application is running in development mode, React will automatically check for all props that we set on components to make sure they must right correct and right data type. For incorrect type, it will generate warning messages in the console for development mode whereas it is disabled in production mode due performance impact. The mandatory prop is defined with isRequired. 669 | The set of predefined prop types are below 670 | - React.PropTypes.string 671 | - React.PropTypes.number 672 | - React.PropTypes.func 673 | - React.PropTypes.node 674 | - React.PropTypes.bool 675 | For example, we define propTypes for user component as below,` 676 | }, 677 | { 678 | title: "When would I use StrictMode component in React?", 679 | type: 1, 680 | content: `I've found it especially useful to implement strict mode when I'm working on new code bases and I want to see what kind of code/components I'm facing. Also if you're on bug hunting mode, sometimes it's a good idea to wrap with the components/blocks of code I think might be the source of the problem.` 681 | }, 682 | { 683 | title: "What's the difference between useCallback and useMemo in practice?", 684 | type: 1, 685 | content: `With useCallback I memoize functions, useMemo memoizes any computed value. 686 | (1) will return a memoized version of fn - same reference across multiple renders, as long as dep is the same. But every time I invoke memoFn, that complex computation starts again. 687 | (2) will invoke fn every time dep changes and remember its returned value (42 here), which is then stored in memoFnReturn.` 688 | }, 689 | { 690 | title: "Explain why and when would I use useMemo()?", 691 | type: 1, 692 | content: `Why: 693 | 694 | In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily. 695 | Additionally, if that re-rendering is an expensive operation, like a long for loop, it can hurt performance. Expensive operations can be costly in either time, memory, or processing. 696 | When: 697 | 698 | Optimal if the wrapped function is large and expensive. 699 | How: 700 | 701 | Memoization is an optimization technique which passes a complex function to be memoized. In memoization, the result is “remembered” when the same parameters are passed-in subsequently. 702 | useMemo takes in a function and an array of dependencies. The dependency’s list are the elements useMemo watches: if there are no changes, the function result will stay the same. Otherwise, it will re-run the function. If they don’t change, it doesn’t matter if our entire component re-renders, the function won’t re-run but instead return the stored result.` 703 | }, 704 | { 705 | title: "When to use useCallback, useMemo and useEffect?", 706 | type: 1, 707 | content: `- useEffect - It's the alternative for the class component lifecycle methods componentDidMount, componentWillUnmount, componentDidUpdate, etc. I can also use it to create a side effect when dependencies change, i.e. "If some variable changes, do this". 708 | - useCallback - On every render, everything that's inside a functional component will run again. If a child component has a dependency on a function from the parent component, the child will re-render every time the parent re-renders even if that function "doesn't change" (the reference changes, but what the function does won't). 709 | It's used for optimization by avoiding unnecessary renders from the child, making the function change the reference only when dependencies change. I should use it when a function is a dependency of a side effect e.g. useEffect. 710 | - useMemo - It will run on every render, but with cached values. It will only use new values when certain dependencies change. It's used for optimization when I have expensive computations.` 711 | }, 712 | { 713 | title: "Can you do Components Inheritance in React?", 714 | type: 1, 715 | content: `The React Team has’t found any use cases where we would recommend creating component inheritance hierarchies. 716 | Props and composition give I all the flexibility I need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. 717 | If I want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.` 718 | }, 719 | { 720 | title: "What is difference between Incremental DOM and Virtual DOM?", 721 | type: 1, 722 | content: `- Incremental DOM is a library for building up DOM trees and updating them in-place when data changes. It differs from the established virtual DOM approach in that no intermediate tree is created (the existing tree is mutated in-place). 723 | This approach significantly reduces memory allocation and GC thrashing for incremental updates to the DOM tree therefore increasing performance significantly in some cases. 724 | - Virtual DOM compares (diff) a new entire virtual DOM with the previous virtual DOM for changes then applies those changes to the actual DOM. - This approach creates a new virtual DOM to determine the changes (memory heavy). Has a big memory footprint because it needs headroom for changes that "might" happen to the virtual DOM.` 725 | }, 726 | { 727 | title: "When would you use flushSync in ReactJS?", 728 | type: 1, 729 | content: `React 18 adds out-of-the-box performance improvements by doing more batching (automated) by default. Batching is when React groups multiple state updates into a single re-render for better performance. 730 | To opt-out of automatic batching, I can use flushSync so my component will be re-rendered after each state update. I might need it when for example some code may depend on reading something from the DOM immediately after a state change.` 731 | }, 732 | { 733 | title: "When shall we use useReducer hook in ReactJS?", 734 | type: 1, 735 | content: `useReducer is an alternative to useState. useReducer is usually preferable to useState when I have complex state logic that involves multiple sub-values or when the next state depends on the previous one. 736 | An example will be a list of items, where I need to add, update and remove items in the state, Here I might have noticed that the state management logic takes a good part of the component body. useReducer helps to separate the concerns of rendering vs a concern of state management. 737 | useReducer also lets I optimize performance for components that trigger deep updates because I can pass dispatch down instead of callbacks. React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.` 738 | }, 739 | { 740 | title: "When to use useState vs useReducer?", 741 | type: 1, 742 | content: `The decision of whether to use useState or useReducer isn't always black and white; there are many shades of grey. But, 743 | use useState if I have: 744 | - JavaScript primitives as state 745 | - Simple state transitions 746 | - Business logic within my component 747 | - Different properties that don't change in any correlated way and can be managed by multiple useState hooks. 748 | use useReducer if I have: 749 | - JavaScript objects or arrays as state 750 | - Complex state transitions 751 | - Complicated business logic more suitable for a reducer function (to separate concern of it) 752 | - Different properties tied together that should be managed in one state object (when state depends on state) 753 | ` 754 | }, 755 | { 756 | title: "How would you store non-state/instance variables in functional React components?", 757 | type: 1, 758 | content: `I can use useRef hook (it's the recommended way stated in docs). useRef returns an object whose reference would not change across re-renders, the actual value for foo is then kept in the current property of that object. 759 | - Declaring variable: const a = useRef(5) // 5 is initial value 760 | - getting the value: a.current 761 | - setting the value: a.current = my_value` 762 | }, 763 | { 764 | title: "What is a Pure Function?", 765 | type: 1, 766 | content: `A Pure function is a function that doesn't depend on and doesn't modify the states of variables out of its scope. Essentially, this means that a pure function will always return the same result given same parameters.` 767 | }, 768 | { 769 | title: "Explain some difference between Flux and AngularJS (1.x) approach", 770 | type: 1, 771 | content: `UI components in AngularJS typically rely on some internal $scope to store their data. This data can be directly mutated from within the UI component or anything given access to $scope — a risky situation for any part of the component or greater application which relies on that data. 772 | By contrast, the Flux pattern encourages the use of immutable data. Because the store is the central authority on all data, any mutations to that data must occur within the store. The risk of data pollution is greatly reduced.` 773 | }, 774 | { 775 | title: "What is the key architectural difference between a JavaScript library such as React and a JavaScript framework such as Angular?", 776 | type: 1, 777 | content: `React enables developers to render a user interface. To create a full front-end application, developers need other pieces, such as state management tools like Redux. 778 | Like React, Angular enables developers to render a user interface, but it is a “batteries included” framework that includes prescriptive, opinionated solutions to common requirements like state management. 779 | While there are many other considerations when comparing React and Angular specifically, this key architectural difference means that: 780 | - Using a library such as React can give a project a greater ability to evolve parts of the system—again for example, state management—over time, when new solutions are created by the open source community. 781 | - Using a framework such as Angular can make it easier for developers to get started and can also simplify maintenance.` 782 | }, 783 | { 784 | title: "What is React Fiber?", 785 | type: 1, 786 | content: `React Fiber is an ongoing reimplementation of React's core algorithm. The main difference between react and react fiber are these new features :- 787 | 1. Incremental Rendering :- React v16.0 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so I can start sending bytes to the client faster 788 | 2. Handle errors in the render API : To make class component an error boundary we define a new lifecycle method called componentDidCatch(error, info). 789 | 3. Return multiple elements from render : With this new feature in React v16.0 now we can also return an array of elements, and string from component’s render method. 790 | 4. Portals : Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 791 | 5. Fragments : A common pattern in React is for a component to return multiple elements. Fragments let us group a list of children without adding extra nodes to the DOM.` 792 | }, 793 | { 794 | title: "How to avoid the need for binding in React?", 795 | type: 1, 796 | content: `There are several common approaches used to avoid methods binding in React: 797 | - Define my Event Handler as an Inline Arrow Function 798 | - Define my Event Handler as an Arrow Function Assigned to a Class Field 799 | - Use a Function Component with Hooks` 800 | }, 801 | { 802 | title: "How does React renderer work exactly when we call setState?", 803 | type: 1, 804 | content: `There are two steps of what we may call render: 805 | - Virtual DOM render: when render method is called it returns a new virtual dom structure of the component. This render method is called always when I call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimisation here in React. 806 | - Native DOM render: React changes real DOM nodes in my browser only if they were changed in the Virtual DOM and as little as needed - this is that great React's feature which optimizes real DOM mutation and makes React fast.` 807 | }, 808 | { 809 | title: "How to use React.memo()?", 810 | type: 1, 811 | content: `With React.memo(), I can create memoized functional components that bail out of rendering on unnecessary updates using shallow comparison of props. 812 | Using the new React.memo() API, the functional component can be wrapped` 813 | }, 814 | { 815 | title: "Can a custom React hook return JSX?", 816 | type: 1, 817 | content: `While there is no hardcore restriction on how I should define custom hooks and what logic should contain, it's an anti-pattern to write hooks that return JSX. 818 | There are a few downsides to using hooks to return JSX 819 | - When I write a hook that returns JSX component, I are essentially defining the component within the functional component, so on each and every re-render I will be creating a new instance of the component. This will lead to the component being unmounted and mounted again. This is bad for performance and also buggy if I have stateful login within the component as the state will get reset with every re-render of the parent 820 | - By defining a JSX component within the hook, I are taking away the option of lazy loading my component if the need be. 821 | - Any performance optimization to the component will require I to make use of useMemo which doesn't give I the flexibility of a custom comparator function like React.memo() 822 | The benefit on the other hand is that I have control over the state of the component in the parent. However, I can still implement the same logic by using a controlled component approach` 823 | }, 824 | { 825 | title: "What is the order of useInsertionEffect, useEffect and useLayoutEffect hooks at component generation?", 826 | type: 1, 827 | content: `useInsertionEffect. 828 | 829 | It fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. So it runs before useLayoutEffect. 830 | useLayoutEffect 831 | 832 | It fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. 833 | useEffect. 834 | 835 | It will run after the render is committed to the screen. So it runs after useLayoutEffect. 836 | Therefore the order of running is: 837 | - useInsertionEffect 838 | - useLayoutEffect 839 | - useEffect` 840 | }, 841 | ]; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | background: #1f1f1f; 9 | } 10 | 11 | body * { 12 | border: none !important; 13 | box-shadow: none !important; 14 | } 15 | 16 | code { 17 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 18 | monospace; 19 | } 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import './index.css'; 5 | import App from './App'; 6 | import reportWebVitals from './reportWebVitals'; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/home.js: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useRef, useState } from "react"; 2 | import Form from 'react-bootstrap/Form'; 3 | import Accordion from 'react-bootstrap/Accordion'; 4 | import Highlighter from "react-highlight-words"; 5 | import Badge from 'react-bootstrap/Badge'; 6 | import Button from 'react-bootstrap/Button'; 7 | import FocusLock from 'react-focus-lock'; 8 | 9 | import { types, interview } from "../data/interview"; 10 | import { react } from "../data/react"; 11 | import { javascript } from "../data/javascript"; 12 | import { hook } from "../data/hook"; 13 | import "./style.css"; 14 | 15 | const Home = () => { 16 | const [keyword, setKeyword] = useState(""); 17 | const [withContent, setWithContent] = useState(false); 18 | const [category, setCategory] = useState([]); 19 | const inputRef = useRef(); 20 | 21 | const handleUserKeyup = useCallback(e => { 22 | if (e.key === "Escape") { //Escape key pressed 23 | e.preventDefault(); 24 | inputRef.current.focus(); 25 | setKeyword(""); 26 | } 27 | else if (e.key === "/") { //Give input focus 28 | e.preventDefault(); 29 | inputRef.current.focus(); 30 | inputRef.current.select(); 31 | } 32 | else if (e.key === "\\") { //Content Search 33 | e.preventDefault(); 34 | setWithContent(prev => !prev); 35 | } 36 | }, []); 37 | 38 | useEffect(() => { 39 | window.addEventListener("keyup", handleUserKeyup); 40 | 41 | return () => { 42 | window.removeEventListener("keyup", handleUserKeyup); 43 | } 44 | }, [handleUserKeyup]); 45 | 46 | return ( 47 |
48 |
49 |
50 | { 51 | types.map((type, index) => { 52 | return ( 53 | 65 | ); 66 | } 67 | ) 68 | } 69 |
70 | 71 |
72 | setWithContent(e.target.checked)} 78 | /> 79 | setKeyword(e.target.value)} 85 | /> 86 |
87 | 88 | {[...interview, ...react, ...hook, ...javascript].sort((a, b) => a < b).filter(d => { 89 | const keywords = keyword.split(" "); 90 | if (withContent) { 91 | return keywords.every((key) => { 92 | return d.title.toLowerCase().includes(key) || d.content.toLowerCase().includes(key); 93 | }) 94 | } 95 | else { 96 | return keywords.every((key) => { 97 | return d.title.toLowerCase().includes(key); 98 | }) 99 | } 100 | }).filter(d => category.every((c) => !c) || category[d.type]) 101 | .map((datum, index) => { 102 | return ( 103 | 104 | 105 | 106 | {types[datum.type]} 107 | 108 | 115 | 116 | 117 | 123 | 124 | 125 | ) 126 | } 127 | )} 128 | 129 | 130 |
131 |
132 | ); 133 | } 134 | 135 | export default Home; -------------------------------------------------------------------------------- /src/pages/style.css: -------------------------------------------------------------------------------- 1 | .highlight { 2 | background: none; 3 | color: yellow; 4 | padding: 0; 5 | text-decoration: underline; 6 | } 7 | 8 | .preline { 9 | white-space: pre-line; 10 | } 11 | 12 | .form-control { 13 | background: #494646; 14 | color: white; 15 | } 16 | 17 | .form-control:focus { 18 | background: #494646; 19 | color: white; 20 | } 21 | 22 | .accordion-button, 23 | .accordion-button:not(.collapsed) { 24 | padding: 10px; 25 | background: #333333; 26 | color: white; 27 | } 28 | 29 | .accordion-button:focus { 30 | background: #282b31; 31 | } 32 | 33 | .accordion-item { 34 | color: white; 35 | background: #4b4b4b; 36 | margin: 3px 0; 37 | } 38 | 39 | .white { 40 | color: white !important; 41 | } 42 | 43 | .form-check-input { 44 | width: 1.5em; 45 | height: 1.5em; 46 | margin-right: 0.5em !important; 47 | } 48 | 49 | .text-content { 50 | white-space: pre-line; 51 | } -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------