React

Question 1

Do states persist when a component is re rendered?

Answer 1

Yes

Question 2

What does it mean to “lift a state”?

Answer 2

Move a state to a parent component

Question 3

When would it be practical to lift a state?

Answer 3

When a sibling component also needs access to that state.

Question 4

Can props be passed from parent to child?

Answer 4

Yes

Question 5

Can props be passed from child to parent?

Answer 5

No

Question 6

Can props be passed from sibling to sibling?

Answer 6

No

Question 7

How would you remove an item from an array stored in a state?

Answer 7

Use the filter function to create a new array that excludes the item

setItems((items) => items.filter(item => item.id !== id))

Question 8

What is a controlled element?

Answer 8

An element that has it’s value defined by a state and also has an event handler which sets the state on change.

Question 9

When would you need to use back ticks instead of quotations?

Answer 9

When you need to concat a variable and a string inside JSX {}

eg. <li className={pizza ${pizzaObject.soldOut ? "sold-out" : ""}}>

Question 10

What is a derived state?

Answer 10

A normal variable that is using data from a state to calculate new data.

Question 11

What is a children prop?

Answer 11

Children prop is the html content in between the opening and closing tag of a component. The component will receive this html as a prop called “children”.

Question 12

What is a Structural component?

Answer 12

A component that contains other components and its purpose is to be the parent.

Examples would be pages, layouts, screens.

They can be large non reusable components but they don’t have to be.

Question 13

What is a Stateless / Presentational component?

Answer 13

A component that has no state. It might receive and display props. It is usually small and reusable.

Question 14

What is a Stateful component?

Answer 14

A component that has a state. Can be small and reusable.

Question 15

What is prop drilling?

Answer 15

Passing a prop down to a component that is deeply nested. This means multiple components that don’t use the prop will need to receive it so they can pass it on to a child component until it reaches the component that will actually use the prop.

Question 16

What is Component Composition?

Answer 16

Combining different components using the ‘children’ prop or explicitly defined props. This makes components more reusable because their content is not predefined.

Question 17

What is a Component?

Answer 17

Description of a piece of UI

A component is a function that returns react elements (element tree), usually written as JSX

“Blueprint” or “Template”

Question 18

What is a Component Instance?

Answer 18

Instances are created when we use components

It is a physical manifestation of a component

It is an individual copy of a component

Has its own state and props

Has a lifecycle

Question 19

What is a React Element?

Answer 19

JSX is converted to React.createElement() calls

A React element is the result of these function calls

Information necessary to generate DOM elements which are the final visual representation of component instances rendered in the browser

Question 20

Explain the uses and purposes of the “Key Prop”

Answer 20

?????????????

Question 21

Event Bubbling

Answer 21

lecture 136-138

Question 22

Thinking in react section 10

Answer 22

re do

Question 23

UseEffect

Answer 23

A function that should be used to implement side effect code. UseEffect will only run when the component is first mounted or when one of it’s dependencies is updated.

Question 24

What is a side-effect

Answer 24

An interaction between a React component and something outside the component.

Question 25

CleanUp

Answer 25

A function that can be returned from a useEffect function.

Runs before the effect is executed again.

Runs after a component is unmounted.

Question 26

do currency convertor l.158

Question 27

Rules of hooks

Answer 27

Only call hooks at the top level (not inside conditionals, loops, nested functions etc)

Can only be called from React functions

Question 28

useRef

Answer 28

Store a reference that will persist across renders.

A variable that persists across renders but is not suitable for useState.

Selecting and storing DOM elements.

Question 29

Differences between useState and useRef

Answer 29

Updating ref does not trigger a re-render like state does.

A ref is mutable while state is immutable.

States update asynchronously while refs do not.