juzdepom/learning-advanced-react

Advanced React Tutorials Playlist by techsith

React Fragments Tutorial

(See commit 1)
Fragment elements basically are like divs except that they only stay in JSX, they don't render to HTML (invisible).

React Interview Questions and answers | Top Commonly Asked | Part -1 (16 min)

1. Name lifecycle methods and their purpose.

note: "react hooks" have a completely different way to handle lifecycle matters.
The current lifecycle methods for React 16.4+ are...
There are two renders: the initial render and the rerender.

initial render lifecycle:
-> constructor
-> static getDerivedStateFromProps (static prevents you from setting state; this method is rarely used)
-> render (can't set state here either)
-> componentDidMount

rerender lifecycle:
-> static getDerivedStateFromProps
-> shouldComponentUpdate
-> render
-> getSnapshotBeforeUpdate
-> componentDidUpdate

2. Why do we use arrow functions in React

arrows functions allow us to set state in React.
Also it allows us to not call a method right away on click.

3. How to prevent components from Rerendering?

3 ways.
-> shouldComponentUpdate()
-> extend React.PureComponent (for "class" components)
-> React.meme (for "functional/presentational" components)

React Interview Questions and answers 2019 | Best Commonly Asked | Part -2 (13 min)

1. Explain Error Boundaries?

static getDerivedStateFromError. componentDidCatch. Helps catch errors if a component is not going to render

2. Best Lifecycle Method for making API calls?

componentDidMount, when the component is completely rendered. make sures that your DOM is ready.

3. Name some of the patterns that React uses.

Context API pattern (use it when we pass props into a deeply nested component, with this pattern you access props via context API; you wrap your component with a special tag, provider and consumer component, provider accepts the props, and consumer is anywhere you want to use those props).
Render props: instead of passing a component as a component, you pass it as a function. Presentation component pattern. I

4. Why would you use React in your project?

The decision has to be made based on the project itself. If React is planning a huge update within the year, don't use it. If your developers are Javascript saavy, use Javascript.

5. What is CSS in JS pattern?

Because React uses all JS, you can pass CSS as all JS objects.

React Interview Questions and answers 2019 | Best Commonly Asked | Part -3 (15 min)

1. Why can't you update state directly without setState?

setState will trigger a rerender.

2. How many ways can you conditionally render in React?

If statement, and statement, conditional operator.

3. Why would you use fragments in your projects.

You can render multiple children. When you wrap the children in a div it creates too many tags which creates errors with the CSS.

4. How to do code splitting in React?

If you have a large project, you might not want to import everything at once. For this, React introduced dynamic import and lady loading.

5. What are some alternatives to Redux?

mobX, apollo client + graphQL, RxJS

6. What is redux middleware?

First sends the post request that goes to the server, and when a positive response is coming back, update the local store.

7. What is the difference between redux-saga and redux-thunk.

These are both middleware. I don't use these two technologies currently.