Formik is a small react form library that helps you with the three major problems, Getting values in and out of form state Validation and error messages Handling form submission

Is it recommended to use CSS In JS technique in React?

React does not have any opinion about how styles are defined but if you are a beginner then good starting point is to define your styles in a separate *.css file as usual and refer to them using className. This functionality is not part of React but came from third-party libraries. But If you want to try a different approach(CSS-In-JS) then styled-components library is a good option.

How well did you know this?

Not at all

Perfectly

Do I need to rewrite all my class components with hooks?

No. But you can try Hooks in a few components(or new components) without rewriting any existing code. Because there are no plans to remove classes in ReactJS.

How well did you know this?

Not at all

Perfectly

How to fetch data with React Hooks?

The effect hook called useEffect is used to fetch the data with axios from the API and to set the data in the local state of the component with the state hook’s update function.
 
 Let's take an example in which it fetches list of react articles from the API
 
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 function App() {
 const [data, setData] = useState({ hits: [] });
 
 useEffect(() => {
 (async () => {
 const result = await axios(
 'http://hn.algolia.com/api/v1/search?query=react',
 );
 
 setData(result.data);
 })()
 }, []);
 
 return (

<ul>
 {data.hits.map(item => (
 <li>
 <a>{item.title}</a>
 </li>
 ))}
 </ul>

);
 }
 
 export default App;
 
 Remember we provided an empty array as second argument to the effect hook to avoid activating it on component updates but only on mounting of the component. i.e, It fetches only on component mount.

How well did you know this?

Not at all

Perfectly

Is Hooks cover all use cases for classes?

Hooks doesn't cover all use cases of classes but there is a plan to add them soon. Currently there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet.

How well did you know this?

Not at all

Perfectly

What is the stable release for hooks support?

React includes a stable implementation of React Hooks in 16.8 release for below packages
 
 React DOM
 React DOM Server
 React Test Renderer
 React Shallow Renderer

How well did you know this?

Not at all

Perfectly

Why do we use array destructuring (square brackets notation) in useState?

When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that updates the value. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.
 
 For example, the array index access would look as follows:
 
 var userStateVariable = useState('userProfile'); // Returns an array pair
 var user = userStateVariable[0]; // Access first item
 var setUser = userStateVariable[1]; // Access second item
 Whereas with array destructuring the variables can be accessed as follows:
 
 const [user, setUser] = useState('userProfile');

How well did you know this?

Not at all

Perfectly

What are the sources used for introducing hooks?

Hooks got the ideas from several different sources. Below are some of them,
 
 Previous experiments with functional APIs in the react-future repository
 Community experiments with render prop APIs such as Reactions Component
 State variables and state cells in DisplayScript.
 Subscriptions in Rx.
 Reducer components in ReasonReact.

How well did you know this?

Not at all

Perfectly

How do you access imperative API of web components?

Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

How well did you know this?

Not at all

Perfectly

What is formik?

Formik is a small react form library that helps you with the three major problems,
 
 Getting values in and out of form state
 Validation and error messages
 Handling form submission

How well did you know this?

Not at all

Perfectly

What are typical middleware choices for handling asynchronous calls in Redux?

Some of the popular middleware choices for handling asynchronous calls in Redux eco system are Redux Thunk, Redux Promise, Redux Saga.

How well did you know this?

Not at all

Perfectly

Do browsers understand JSX code?

No, browsers can't understand JSX code. You need a transpiler to convert your JSX to regular Javascript that browsers can understand. The most widely used transpiler right now is Babel.

How well did you know this?

Not at all

Perfectly

Describe about data flow in react?

React implements one-way reactive data flow using props which reduce boilerplate and is easier to understand than traditional two-way data binding.

How well did you know this?

Not at all

Perfectly

What is react scripts?

The react-scripts package is a set of scripts from the create-react-app starter pack which helps you kick off projects without configuring. The react-scripts start command sets up the development environment and starts a server, as well as hot module reloading.

How well did you know this?

Not at all

Perfectly

What are the features of create react app?

Below are the list of some of the features provided by create react app.
 
 React, JSX, ES6, Typescript and Flow syntax support.
 Autoprefixed CSS
 CSS Reset/Normalize
 A live development server
 A fast interactive unit test runner with built-in support for coverage reporting
 A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps
 An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

How well did you know this?

Not at all

Perfectly

What is the purpose of renderToNodeStream method?

The ReactDOMServer#renderToNodeStream method is used to generate HTML on the server and send the markup down on the initial request for faster page loads. It also helps search engines to crawl your pages easily for SEO purposes. Note: Remember this method is not available in the browser but only server.

How well did you know this?

Not at all

Perfectly

What is MobX?

MobX is a simple, scalable and battle tested state management solution for applying functional reactive programming (TFRP). For reactJs application, you need to install below packages,
 npm install mobx --save
 npm install mobx-react --save

What are the differences between Redux and MobX?

Below are the main differences between Redux and MobX,

Should I learn ES6 before learning ReactJS?

No, you don’t have to learn es2015/es6 to learn react. But you may find many resources or React ecosystem uses ES6 extensively. Let’s see some of the frequently used ES6 features,

[1] Destructuring: To get props and use them in a component
// in es 5
 var someData = this.props.someData
 var dispatch = this.props.dispatch

// in es6
const { someData, dispatch } = this.props

[2] Spread operator: Helps in passing props down into a component
// in es 5

// in es6

[3] Arrow functions: Makes compact syntax
// es 5
var users = usersList.map(function (user) {
 return <li>{user.name}</li>
})
// es 6
const users = usersList.map(user => <li>{user.name}</li>);

What is Concurrent Rendering?

The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there’s something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

// 1. Part of an app by wrapping with ConcurrentMode

// 2. Whole app using createRoot
ReactDOM.unstable_createRoot(domNode).render();

What is the difference between async mode and concurrent mode?

Both refers the same thing. Previously concurrent Mode being referred to as “Async Mode” by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

Can I use javascript urls in react16.9?

Yes, you can use javascript: URLs but it will log a warning in the console. Because URLs starting with javascript: are dangerous by including unsanitized output in a tag like <a> and create a security hole.</a>

const companyProfile = {
website: “javascript: alert(‘Your website is hacked’)”,
};
// It will log a warning
</a><a>More details</a>
Remember that the future versions will throw an error for javascript URLs.

What is the purpose of eslint plugin for hooks?

The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,

Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).
Hooks are called in the same order on every render.

What is the difference between Imperative and Declarative in React?

Imagine a simple UI component, such as a “Like” button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.

The imperative way of doing this would be:

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}
Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.

In contrast, the declarative approach would be:

if( this.state.liked ) {
    return ;
} else {
    return ;
}
Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand.

What are the benefits of using typescript with reactjs?

Below are some of the benefits of using typescript with Reactjs,

[1] It is possible to use latest JavaScript features
[2] Use of interfaces for complex type definitions
[3] IDEs such as VS Code was made for TypeScript
[4] Avoid bugs with the ease of readability and Validation

How do you make sure that user remains authenticated on page refresh while using Context API State Management?

When a user logs in and reload, to persist the state generally we add the load user action in the useEffect hooks in the main App.js. While using Redux, loadUser action can be easily accessed. App.js import {loadUser} from '../actions/auth'; store.dispatch(loadUser()); But while using Context API, to access context in App.js, wrap the AuthState in index.js so that App.js can access the auth context. Now whenever the page reloads, no matter what route you are on, the user will be authenticated as loadUser action will be triggered on each re-render. index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import AuthState from './context/auth/AuthState' ReactDOM.render( , document.getElementById('root') ); App.js const authContext = useContext(AuthContext); const { loadUser } = authContext; useEffect(() => { loadUser(); },[]) loadUser ``` const loadUser = async () => { const token = sessionStorage.getItem('token'); ``` ``` if(!token){ dispatch({ type: ERROR }) } setAuthToken(token); ``` ``` try { const res = await axios('/api/auth'); ``` dispatch({ type: USER_LOADED, payload: res.data.data }) } catch (err) { console.error(err); } }

What are the benefits of new JSX transform?

There are three major benefits of new JSX transform, [1] It is possible to use JSX without importing React packages [2] The compiled output might improve the bundle size in a small amount [3] The future improvements provides the flexibility to reduce the number of concepts to learn React.

How does new JSX transform different from old transform?

The new JSX transform doesn’t require React to be in scope. i.e, You don't need to import React package for simple scenarios. Let's take an example to look at the main differences between the old and the new transform, Old Transform: import React from 'react'; ``` function App() { return

Good morning!!

; } Now JSX transform convert the above code into regular JavaScript as below, ``` import React from 'react'; ``` function App() { return React.createElement('h1', null, 'Good morning!!'); } New Transform: ``` The new JSX transform doesn't require any React imports ``` function App() { return

Good morning!!

; } Under the hood JSX transform compiles to below code ``` import {jsx as _jsx} from 'react/jsx-runtime'; ``` function App() { return _jsx('h1', { children: 'Good morning!!' }); } Note: You still need to import React to use Hooks. ```

How do you get redux scaffolding using create-react-app?

Redux team has provided official redux+js or redux+typescript templates for create-react-app project. The generated project setup includes, [1] Redux Toolkit and React-Redux dependencies [2] Create and configure Redux store [3] React-Redux passing the store to React components [4] Small "counter" example to demo how to add redux logic and React-Redux hooks API to interact with the store from components The below commands need to be executed along with template option as below, [1] Javascript template: npx create-react-app my-app --template redux [2] Typescript template: npx create-react-app my-app --template redux-typescript

What are React Server components?

React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance. These components allow us to load components from the backend. Note: React Server Components is still under development and not recommended for production yet.

What is prop drilling?

Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

What is state mutation and how to prevent it?

State mutation happens when you try to update the state of a component without actually using setState function. This can happen when you are trying to do some computations using a state variable and unknowingly save the result in the same state variable. This is the main reason why it is advised to return new instances of state variables from the reducers by using Object.assign({}, ...) or spread syntax. This can cause unknown issues in the UI as the value of the state variable got updated without telling React to check what all components were being affected from this update and it can cause UI bugs. Ex: ``` class A extends React.component { constructor(props) { super(props); this.state = { loading: false } } ``` componentDidMount() { let { loading } = this.state; loading = (() => true)(); // Trying to perform an operation and directly saving in a state variable } How to prevent it: Make sure your state variables are immutable by either enforcing immutability by using plugins like Immutable.js, always using setState to make updates, and returning new instances in reducers when sending updated state values.

What is the difference between useState and useRef hook?

[1] useState causes components to re-render after state updates whereas useRef doesn’t cause a component to re-render when the value or state changes. Essentially, useRef is like a “box” that can hold a mutable value in its (.current) property. [2] useState allows us to update the state inside components. While useRef allows refrencing DOM elements.

React 4of4 Flashcards

Good morning!!

Good morning!!