Obify Consulting

Stateful Component 

1. Stores info about components state change in memory.
2. Have authority to change state.
3. Contains the knowledge of past, current and possible future charges in state.
4. Stateless components notifies them about the requirement of the state change, then they send down the props to them.

Stateless Components

1. Calculate the internal state of the components.
2. Do not have the authority to change state.
3. Contains no knowledge of past, current and possible future state changes.
4. They receive the props from the statefull components and treat them as callback functions.

• It can be define as a process in React app where props are passed from one part of a tree to another by going through other parts that do not need the data, but only help in passing it through the tree.
• It is also known as Prop Threading.

• The React Context API is a way for a React app to effectively produce global variables that can be passed around.
• This is the alternative to “prop drilling”
• A new type of context can be created using React.createContext API.

• The useState() is a React Hook that allows to have state variables in functional components.
• The useState hook is a special function that takes the initial state as an argument and returns an array of two entries.

• setState() allows us to change state in a React class component.
• This is the primary method you should use to update the UI.
• setState() does notalways update the component immediatly.
• Syntax- setState(updater.[callback])

• Fragments let us group a list of children without adding extra nodes to the DOM.
• While rendering multiple elements will require a <div> tag around the content as the render method will only render a single root inside it at a time.
• In React 16.2 version, Fragments were introduced , and we use then instead of the extraneous <div> tag.

• Lazy loading is the feature introduced in React v16.6, which allows for some Components to load later than other components.
• It is also referred to as code splitting & data fetching.

There are many techniques through which the performance of a React app can be optimized, some of them are as follows –

1. Using useMemo() –

• It is a React hook that is used for caching CPU-Expensive function.
• useMemo() hook can be used to cache such functions.

2. Using React.PureComponent –

• It is a base component class that checks the state and props of a component to know whether the component should be updated.

3. Maintaining State Colocation –

• This is a process of moving the state as close to where we need it as possible.