HTML

1. New tags in HTML 5 - audio, video, svg, header, footer, nav, figure, progress,
2. New attributes in HTML 5 - form>input>'placeholder', input>type='email',
3. In-line and block level elements

CSS
1. CSS Selectors - element tag(div), class(.), id(#), universal(*), Combinator(space, >, +, ~),
pseudo-class selector(a:hover), pseudo-element selector(h1::after), attribute
selector(a[target])
2. preprocessors - SASS/scss
3. @mixin vs placeholder
4. Grid vs FlexBox vs floats vs position -
https://medium.com/@madhur.taneja/css-layouts-cced6c7a8764
5. CSS box model - position, margin, border, padding, content
6. Manipulate CSSDOM through JS
7. display(inline, block, inline-block,flex, grid, none) and position(static(default, top bottom
left right do not work), relative, absolute, fixed, sticky)
8. How to center a div - display: flex, align-items: center, justify-content: center
9. CSS overlay - container{position: relative}, element{position: absolute, z-index: 10},(imp:
z-index works only on positioned elements and flex items)
10. Css scroll - overflow, overflow-x, overflow-y - values - hidden, auto, scroll, visible(default,
renders outside visible area)
11. Visibility: hidden vs display: none
12. @media query - @media screen and (condition){style}
13. CSS Animations - @keyframes - tbd

Styled-Components
1. Why use styled-components - react like solution for issues like style/class clashing in
css, scss practice.
2. Css-in-js libraries - use js/es6 to dynamically tailor css style exclusive for particular react
component and generate unique class names in runtime.
3. styled.element`{}`, styled(reactComponent)`{}`, css`{}`, as={component}
4. keyframes

Javascript Interview prep

1. Promise vs async/await and interchangeable use of them

2. Adding custom function to array.prototype
3. Javascript design patterns - Constructor, Singlton, Prototype, Observer
4. Array.prototype.sort() -
5. Prototypes in Javascript - the mechanism by which JavaScript objects inherit features from
one another
6. callstack in JavaScript
7. Concurrency model and the event loop
8. priority of setTimeout and Promise(Promise having greater priority)
9. Closures, Currying
10. First Class functions, callback functions
11. bind() vs call() vs apply()
12. Javascript Object model
13. preventDefault() & stopPropagation()
event bubbling vs event capturing
14. destructuring
15. spread vs rest op(...)
16. shallow vs deep copy(reference type data like Objects) >
17. Shallow copy - obj2 = obj1, spread(...), Object.assign({},obj),
18. what are different error types in Javascript
TypeError: Assignment to constant variable,
SyntaxError: Unexpected identifier
RangeError: Invalid array length
ReferenceError: variable is not defined
19. Dom manipulation techniques in JS - createElement(), appendChild(), removeChild(),
replaceChild(), innerHTML

JS Concepts

1. Value type(primitive) data vs reference type(object, array, function) data in JS

2. Is JS OOP? - no, bcoz no classical inheritance, only prototypal inheritance.
3. prototypal inheritance vs classical inheritance
4. String methods
a. length
b. charAt()
c. concat()
d. includes()
e. match()
f. replace()
g. slice()
h. split()
i. substr() vs subString()
j. toUpperCase()
5. Array functions
a. toString() vs join() - join accepts delimiter, every JS object has a toString()
b. push(), pop() - effect reflects at the end of [], mutates the original [], pop() returns
last element in [], push() returns new [].length
 c. shift(), unshift() - shift() pops out the first element of [] and returns the same.
unshift() pushes the parameter to the beginning of the [] and returns new
[].length. Both mutate the original [].
d. concat() - [].concat([], [], …) contacts arrays and returns a new [], immutably.
e. includes() returns boolean
f. splice() - adds, removes, replaces items of []. splice(at index, no of elem to
remove, elem1 to add, ….). It returns the [] of deleted items.it mutates the original
[].
g. slice() - slices out a piece of [] in an Immutable way and returns a sliced [].
slice(start_index, end_index+1)
h. sort((a, b) => {...}), reverse() - mutates []
i. forEach() - mutates original [],
j. map(), filter(), reduce((acc, ele, index, arr) => {}, acc) - immutates,
k. find(() => {return condition}), return first matched element
l. every(), some() returns boolean
6. Array - [] - length, push(), pop(), forEach(), includes() - one JS arrays can contain
different data types
7. Set - size, add(), delete(), forEach(), has()
8. Map - size, set(), get(), delete(), forEach(), has()
9. Map vs Object - order of insertion is preserved in map, map keys can be both primitive
and objects. Object keys can be only integer, string, Symbol.
10. localStorage, sessionStorage - setItem(), getItem(), removeItem, clear(), length
11. serialization in JS. JSON.stringify() and JSON.parse()
12. Symbols in JS
13. Ways to copy objects in JS - spread(...), Object.assign(), Object.create(), _.clone() -
shallow copy,
14. Ways to copy arrays in JS - [].concat(), [].slice(), Array.from() - shallow copy
15.

TS Concepts
1. Generic <Type>
2. Inference
3. Type casting - x as Type, <Type>x
4. Type alias vs interface - type: any, non-extendable, Interface: only objects, extendable,
implementable
5. Union |, Intersection & of type aliases and interfaces.
6. unknown vs any - use unknown at the time of typing and cast at the time of assigning is
better than any, any should be avoided at any cost.
7. Tuples - a typed array with a pre-defined length and types for each index
8. Readonly - type check that makes array/tuples immutable at compile type

React Interview prep

1. Component vs PureComponent - (shouldComponentUpdate())
2. hooks from recat-redux library - (useSelector(), useDispatch(), useStore())
3. Conditional rendering - (if, ?:, &&)
4. Error boundary in React - componentDidCatch(), static getDerivedStateFromError() - catch
JavaScript errors anywhere in child component tree, log those errors, and display a fallback UI,
ErrorBoundary can catch in which scenarioes? - during rendering, in lifecycle methods, in
constructor of child.
5. Lazy loading and <Suspense> in React - const OtherComponent = React.lazy(() =>
import('./OtherComponent'));
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
6. how to debug React application in IDE
7. useMemo vs useCallback
8. how to optimize the webpage.. - Memoization - React.memo(), PureComponent,
shouldComponentUpdate(), , Lazy Loading - React.lazy(), and <Suspense>, <ErrorBoundary>,
Memoization of api calls, useCallback(), useMemo()
9. are reducers async or sync functions - keep reducers pure and synchronous at all time
10. is setState() asynchronous - Yes
11. props validation in react - propTypes, defaultProps ={}
12. DOM updation / reconciliation - the process through which React updates the DOM.
13. Explain Component life cycle Mounting phase - constructor(), static
getDerivedStateFromProps(), render(), componentDidMount()
14. Explain Component life cycle Updating phase - static getDerivedStateFromProps(),
shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()
15. data structure libraries (e.g., Immutable.js, normalizr.js, immer.js(produce()))
16. React custom hooks
17. Webpacks
18. loadable library
19. how to create a prod build - npm run build
20. JSX Element {element} vs React component <Component />
21. HOC, Pure HOC, example: connect() from redux library
22. React Router - <Router>, <BrowserRouter> , <HashRouter>, <MemoryRouter>,
<StaticRouter>, <NativeRouter>
23. Axios - interceptors
24. Code splitting techniques

Next.js Interview questions

1. Routing, pages folder

2. SSR advantages
a. Security as not exposing apis, data to client side
b. Performs well even in low power, slow devices
 c. Better SEO
3. Automatic static optimization and hybrid(SSG + SSR) app with Next
4. Caching of pages in Next
5. Code splitting with Next -
https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting
6. Next amp(Accelerated Mobile Pages) - very advanced concept useful for blogs and
news applications. First page, hybrid page

React concepts

1. Component vs PureComponent - (sholdComponentUpdate(), React.memo())

2. React hooks
a. useState()
b. useEffect()
c. useContext()
d. useRef()
e. useReducer() - improvement over useState
f. useCallback() - returns func ref
g. useMemo() - returns value
3. hooks from recat-redux library - (useSelector(), useDispatch())
4. Conditional rendering - (if, ?:, &&)
5. Error boundary in React
6. Lazy loading in React
7. how to debug React application in IDE
8. Unit tests - jest / enzyme
9. Component vs PureComponent vs React.StrictMode
10. isomorphic React application/React SSR (good to know)
11. forwardRef, forwardedRef
12. Styled Components
13. React Synthetic events list
14. Design patterns in React projects
15. ref , React.forwardRef((props, refs) => {<Component>})
16. React Architecture:
a. Reconciliation
b. Diffing algo
c. Shadow Dom vs Virtual Dom
d. React Fiber
17. Code splitting in React
a. Bundling - Webpack
b. Lazy load - React.lazy()
c. Dynamic import - import().then(mod => {})
d. Error boundary
18. React 18 new features >
 a. ReactDOM.render() > ReactDOM.createRoot(), render()
b. ReactDOM.hydrate() > ReactDom.hydrateRoot(),

Next.js concepts

1. Routing, pages folder, Link, useRouter()

2. Isomorphic app, SSR, SEO
3. Enhanced CSS support
4. Lazy loading with dynamic()
5. Layout - Navbar, Footer; Image,
6. pre-rendering -
a. SSG - static site generation
i. w/o data - default
ii. With data - export async getStaticProps()
b. SSR - server side rendering - export async getServerSideProps()
c. CSR - Client side rendering - client side mechanism like react useEffect()
d. ISR - incremental static regeneration - getStaticProps() with revalidate prop
e. Dynamic routing - getStaticPaths() along with getStaticProps()
7. pages/api
8. Next build system
9. Code Splitting in Next -
a. Bundling -
i. Server side bundle - pages/api/, getStaticProps(), getServerSideProps(),
getInitialProps()
ii. Client side bundle
b. Built-in splitting - Each file inside pages/ folder will be automatically code split into
its own JS bundle during build
c. Manual splitting - dynamic(() => {}, {}) with React.Suspense, next/dynamic -
extension of React.lazy()

Redux middleware questions

1. Saga effects
a. call
b. put
c. all
d. select
e. take
f. takeEvery
g. takeLatest
h. takeLeading
i. Fork

Unit Testing
 1. Jest
a. Describe(), beforeAll(), afterEach(), test/it(), expect(enzyme
selector).matcher(value)
b. Mock function - jest.fn(),
c. Mock module - jest.mock() //not required if automocking enabled,
func.mockImplementation(()=> {})
2. Enzyme
a. JSDOM is a JavaScript based headless browser that can be used to create a
realistic testing environment.
b. Render component into JSDOM
i. Shallow - shallow(<Component />)
ii. Full Dom - mount()
iii. Static - render()
c. Selectors - find(selector), selector can be class, id, element tag, React
component with props

Storybook

NFR
1. Accessibility - A, AA, AAA. tools - Screen reader - NVDA
2. Security -
3. Performance - Lighthouse, Profilers
4. Localization
5. Scalability

React Native
1. Animation
2. Routing
3. Core components
4. View vs ScrollView