React

Question 1

Which if the following is used when adding an event to a button in react?
A onClick
B. onclick

Answer 1

onClick

Question 2

What is the convention of defining a class in react?

Answer 2

Use lowercase for class 
the class extends component 
You normally states to access or modify  properties values.

Question 3

What is the correct method of declaring a class name for a JSX element?

Answer 3

Use className

Question 4

How do you add and output dynamic content within a react function.

Answer 4

Use the curly braces and or props

Question 5

What is a restriction faced in react JSX

Answer 5

Class is reserved

You advised to only have one route element per component.

Question 6

Can you change states directly?

Answer 6

No, it is immutable. Use setState to change state and notify dom

Question 6

Can you change states directly?

Answer 6

No, it is immutable. Use setState to change state and notify dom

Question 7

True or false. The function element found in setState merges the changes with the old state.

Answer 7

False

The function used in the hook usestate does not merge. It creates a new state.

Question 8

What are the two ways in can modify the Dom in react?

Answer 8

state taken from react component

and props which use Hooks

Question 9

What is a example of react Hook?

Answer 9

useState

Question 10

What is the difference in the way states and hooks handle other state data?

Answer 10

In classes that use state , any changes made are merged with previous state.
In functions props which use Hooks, the state creates new state so you need to include this change in function that changes state.

Question 11

What is React.createElement?

Answer 11

Method for rendering JSX , Takes the following arguments: an element which is rendered to the Dom, configuration other wise a object, then children or what will be nested in side the elements.

Question 12

How can one render iteration in react

Answer 12

JavaScript provides a array method Array.protoype.map which can be used render an array of objects.

Syntax let new array = array.map( funct callback( current Value, [, index [, array]] { return element of new array }[ , thisArg])

const arrayx = [ 1 , 2 , 3 , 4 ]
const map1 = arrayx.map( x => x + 1 )

Question 13

When is it not ideal to use map()

Answer 13

When you are not using the returning array , not returned a value from callback.

Question 14

How would you attempt to handle JavaScript errors beyond your control , like server request.

Answer 14

You can wrap your code using error boundaries class. This return a message in production mode.

Question 15

How can you run locally scoped class names for CSS styles that are easy to identify without adding complexity with naming conventions.

Answer 15

You can use CSS modules .
React V2,, + -require you add modules in the name using [name]. module.css

Older version require ejection and modifications

Question 16

What are error boundaries?

Answer 16

Error boundaries are react components that handle JavaScript errors by catching them in their child components tree. Allowing you to log errors and display fall back UI rather than let the UI crash.
A component becomes a errorBoundary when it defines either or both getDerivedStateFromError or componentDidCatch lifecycle methods.

Question 17

How does React monitor changes in state in the mapping of React arrays

Answer 17

Map has key which can provide unique identifier for each element in the state array.

Question 18

What are the benefits of spread operators in Rest state management?

Answer 18

Spread operators can be used when setting state in order to avoid directly updating the original state object.

Question 19

What is the purpose of the restructuring in useState and hooks?

Answer 19

useState uses restructuring to split array into current state and the function to set state.

Question 20

What are the benefits of using arrow functions in react components callbacks.

Answer 20

Arrow functions have a key feature that shares same lexical ‘ this ‘ as surrounding code. It does not require the literal use of binding with ‘this’ operators unlike function.

Question 21

Snipet “rce” means

Answer 21

Create a customisation react class component.

Question 22

Snipet “rafcp” means

Answer 22

Create a react function component with props

Question 23

Snipet rafce means

Answer 23

Create a react arrow function component

Question 24

Snipet rfce means

Answer 24

create a react function component

Question 25

Snipet “rcc” means

Answer 25

Create a default react class component

Question 26

Snipet ‘rfc’ means

Answer 26

Create a default react function component

Question 27

Snipet ‘imrs’ means

Answer 27

Import react and useState hook

Question 28

Snipet ‘est’ means

Answer 28

create an empty state object.

Question 29

Snipet ‘sst’ means

Answer 29

create an empty setState method call.

Question 30

Snipet ‘bnd’ means

Answer 30

create a method referencing binding

Question 31

snipet ‘nfn’ means

Answer 31

create an arrow function

Question 32

What is advantage of using errorboundaries

Answer 32

They catch errors during rendering, lifecycle methods and constructors in tree below them. They do not catch errors in UI

Question 33

What are the main life-cycles for updating react

Answer 33

shouldComponentUpdate(nextProp , nextstate)

Question 34

How do you include dependencies in useEffect hook

Answer 34

You include an array of dependencies i.e useEffect(()=>{//effect code },[//dependencies]);

Question 35

What happens when you have a useEffect with an empty array of dependencies?

Answer 35

It will only run the effect in useEffect once.

Question 36

What are the rules of using hooks?

Answer 36

It must be used in top levels of function. i.e not in loops, conditions or inner functions.
Secondly, it hooks should be called from react function, or created hook not javascript function.

Question 37

How can you optimise class based react component?

Answer 37

shouldComponentUpdate(nextProps , nextSTate) can be monitored to see if there are changes after render() by comparing the nextProps with current or this.props. This only works provided you create a copy of state of the state array , otherwise you will be comparing to current pointer.

Question 38

How can you optimise functional based react component.

Answer 38

use react.memo

Question 39

How can you optimise functional based react component.

Answer 39

use react.memo
Wrap react.memo around component code to be used.
default export React.memo(function)

Question 40

What is the benefit of using higher order component.

Answer 40

It can be used to handle cross-cutting concerns. It can be used as a abstraction that allows us to define reused logic in a single place and share it across many components. HOC adds an wrapping class which adds additional functionality. It takes a function and returns a new component.

Question 41

What is HOC

Answer 41

It is a design pattern, higher-order component (HOC) is an advanced technique in React for reusing component logic.

Question 42

Why must you not modify the original components prototype.

Answer 42

modifying the original component or mutating code inside HOC , can result in clashes. the consumer must know how they are implemented in order to avoid conflicts with other HOCs. Therefore use compositions instead. ( wrapping the input component in a container )component:

Question 43

What is the purpose of proptypes in react?

Answer 43

proptypes provide type checking ensuring the right value is being assigned.

Question 44

How may one access unknown props in higher order components?

Answer 44

Using the withnameofclass you can access jsx with wrappedcomponent and then use destructuring to extract the individual props.

Question 45

What are refs in react?

Answer 45

Ref is an technique used to modify props in situations where parent needs to interact with child components. ref can be created in the constructor using React.createRef() or by using callback refs { } (i.e ref pass a function with its containing component as an argument) . These work only in class components. For functional you use hook useRef and reference useRef()

Question 46

What is context?

Answer 46

It is a way of handling prop chain problems by a way to pass data through the component tree without having to pass props down manually at every level.

Question 47

What is context API?

Answer 47

It is a way of handling prop chain problems by providing a way to pass data through the component tree without having to pass props down manually at every level.

Question 48

What is signature of useState hook?

Answer 48

Array [current state , setStatefunction] = useState( initvalue)

Question 49

Where should you use setState function?

Answer 49

Use it in callback function used in JSX reference. Value to trigger

Question 50

What is as a prop , and how is it used?

Answer 50

While you are able to pass down information from parent to child via props, to pass information from child to parent you need to create a callback prop in form of a function with the named reference element as a property in the child element.

Question 51

What is axios?

Answer 51

It is a promised based HTTP client used for dealing XMLHttpRequests and Node interface for both on Node and web browser through its API. It is useful tool for interfacing web with REST API .

Question 52

How do you use axios?

Answer 52

Use axios GET request through promise axios.get( “URL”).then(function(response){

// Handle success
Console.log(response)
}).catch(  function (error)){ 
  // Manage failure
  Console.log(response)
}
)

Question 53

When should you use componentDidUpdate?

Answer 53

Use it when there is side effect in your web app , such as an update to component or props change which isn’t called for initial render. But only for Dom update.

Question 54

What is suggested to address performance issues in componentDidUpdate?

Answer 54

At risk of looping update and rendering a condition is added to check change of state between prevState and this.state.

Question 55

True or False: Props are readonly

Answer 55

True, a component should never modify its own props.

Question 56

How do you render a React Element

Answer 56

You first must pass DOM element to ReactDOM.createRoot()
then you pass the react element to root.render()

Question 57

why is a DIV in REACT regarded as a root DOM?

Answer 57

DIV is a root DOM node because everything inside it will be managed by React DOM.

Question 58

What is react fibre?

Answer 58

react uses react fiber to reconcile the fiber tree or DOM tree. A fiber is a JavaScript object, a unit of work. It represents a node of the DOM tree, or a React element, and contains data about a component. The react core uses a reconciler (algorithm) to identify which elements are to be rendered after certain changes are made by the developer, it does this by comparing two DOMS and diff’ing them. React fiber is a new reconciler with backward compatibility.

Question 59

What is the purpose of imrd snippet?

Answer 59

Importing reactDOM

Question 60

What is the purpose of the imbr snippet

Answer 60

Importing browser router

Question 61

What I the purpose of a browser router?

Answer 61

Everything to be routed should be held there. It has property to render content according to a defined path or route a component to a defined path.