React

Question 1

Vad används useEffect() för?

Answer 1

Skapa side effects i en komponent.

Question 2

useState()

Answer 2

Funktion för att använda state.

Question 3

Where to put state?

Answer 3

As close as possible to the component/s using that state.

Question 4

What prop do list items need in react?

Answer 4

key (with a unique ID for every item)

Question 5

How to use react fragments?

Answer 5

Wrap siblings in <> </> in jsx

Question 6

Vilka parametrar har useEffect?

Answer 6

Två parametrar:
- En funktion att exekvera,
- En array med variabler som om de ändras ska trigga funktionen i första parametern.

Question 7

Vilka varianter finns för andra parametern i useEffect?

Answer 7

1. Om andra argumentet saknas så körs funktionen alltid.
2. Om arrayen är tom så körs funktionen enbart när komponenten mountas.
3. Om arrayen har ett eller flera värden/state, så körs funktionen när något av dem ändras.

Question 8

What does useState return?

Answer 8

en array med två värden:
State
Och setState

Question 9

How to call useState?

Answer 9

const [state, setState] = useState(initialState);

Question 10

Whats the html attribute “class” called in jsx?

Answer 10

className

Question 11

What’s the label element’s attribute “for” called in jsx?

Answer 11

htmlFor

Question 12

How to make a controlled input?

Answer 12

Pass a value prop with whatever state value you want the input to be. Use a handleChange to set state.

Question 13

How to create a react component?

Answer 13

Write a JS-function that returns markup

Question 14

How to nest react components?

Answer 14

Call a function that returns markup within another. Like this:

<Parent>
  <Child/>
<Parent/>

Question 15

How to add markup in react components?

Answer 15

JSX

Question 16

How to add styles to react components?

Answer 16

1. using the ‘className’ attribute to add css-classes
2. using the ‘style’ sttribute to add inline styles depending on js-variables or expressions

Question 17

How to display data in react components

Answer 17

Curly braces in JSX ‘escapes’ back in to js to interpolate variables or expressions.

Question 18

How to render things conditionally?

Answer 18

Ternary operator if simple condition. Can be used in jsx because it’s an expression. Complex conditions are put in js and referenced from jsx with an expression.

Question 19

What do lists in react need?

Answer 19

‘Key’ attribute with a unique value. React uses it to understand what is updated between renders.

Question 20

How to respond to events in react?

Answer 20

Declare event handler functions in components. Pass them to Components listening for events.

Question 21

How to update the screen in response to events in react?

Answer 21

Have your event handler functions set state and components will rerender i.e. update the screen.

Question 22

How to share data between components in three steps?

Answer 22

1. lift state to common parent
2. pass props ` <MyComponent variable={variable} eventHandler={eventHandler}/> `
3. read props ` function MyComponent({ variable, eventHandler }) `

Question 23

How to pass a function with arguments as a callback?

Answer 23

Wrap it in an arrow function.

'onclick' = () => myFunction(arg)

Question 24

The five steps of implementing a UI in react?

Answer 24

1. Draw boxes on a mockup and name your components
2. Build static version
3. Identify state
4. Identify WHERE to put state
5. Add inverse data flow.

Question 25

How to break the react UI into component hierarchy?

Answer 25

• draw the UI, make boxes around components and name them
• make tree of hierarchy (what components are nested in other components)

Question 26

How to build a static version in React?

Answer 26

• Build components that reuse other components and pass data with props
• Bigger project - build bottom-up
• Smaller projects - build top-down

Question 27

How to find the minimal but complete representation of UI state?

Answer 27

Identify what isn’t state:
1. Remains unchanged
2. Passed in from parent component
3. Computed based on something else

Question 28

How to identify where state should live?

Answer 28

1. Identify every component that renders something based on that state
2. Find closest common parent to them
3. • Put state directly in common parent
     - Put state in some component above the common parent
     - If nothing else makes sense create a new component to hold the state somewhere above the common parent component.

Question 29

How to add inverse data flow in react ui?

Answer 29

1. setState based on user input
2. Pass functions to setState down from stateful component to components recieving user input

Question 30

Vad är redux?

Answer 30

Ett JS-bibliotek för hantering av globalt state (i react-applikationer)

Question 31

Hur representerar redux state?

Answer 31

Ett omutbart (readonly) js-objekt.

Question 32

Vad resulterar en förändring i state i redux i?

Answer 32

Ett nytt state-objekt som innehåller de förändringar som gjorts.

Question 33

Hur uppdateras state i redux?

Answer 33

Via actions

Question 34

Vad är en ‘action’ i redux?

Answer 34

En action i Redux ett vanligt objekt med en obligatorisk type-egenskap och valfritt ytterligare data (payload), som tillsammans beskriver en händelse som leder till en förändring av applikationens tillstånd.

Question 35

Vad är reducer-funktionen i redux?

Answer 35

Den funktion som körs när en action dispatchas från applikationen. Beroende på type-egenskapen i action justeras state.

Question 36

State mutations in redux must be…

Answer 36

Pure functions taking in current state and the action being dispatched returning a new state, combining the two.

Question 37

What argument does Redux.createStore take?

Answer 37

A reducer function to run whenever an action gets dispatched.

Question 38

What is the set-back of prop drilling and overuse of context?

Answer 38

It can lead to code that is difficult to maintain. Especially in larger applications.

Question 39

How to overcome problems with prop drilling and overuse of context?

Answer 39

Composition. Structuring components in a more modular and flexible way.

Question 40

What is prop drilling?

Answer 40

Passing props way down through the component tree to the component that actually uses it. Makes code hard to follow.

Question 41

What is Context overuse?

Answer 41

An native react API for passing data deep into the component tree without prop drilling. Using it too much leads to tight coupling and makes code hard to refactor. Can also lead to performance issues if a lot of components are consuming context.

Question 42

What is composition in react?

Answer 42

It is a pattern where you build components that can be reused and combined in different ways. Making it possible to only pass the necessary props to each component.

Question 43

What is “Render props” or “Children as function”?

Answer 43

A react design pattern that allows you to pass a function as props or children to a component. The component calls the function to dynamically determine what should be rendered.

Question 44

Two advantages of render props (or children as functions)

Answer 44

1. Flexible rendering: eg. only render the child if data is available
2. Separation of concerns: the parent component is responsible only for retrieving or providing data and the child component (passed as a function asachildren or props to parent) is responsible for rendering UI based on data provided by parent.

Question 45

How does render props or children as function avoid prop drilling?

Answer 45

By having a parent component be responsible for directly fetching the data needed and a child - passed as a function to the parent - which renders something based on the data.

Question 46

Two use cases for render props or children as function?

Answer 46

1. When there are components that share behaviour (like fetching data), but need to render differently depending on situation
2. When you want to avoid prop drilling by keeping data handling logic encapsulated in a parent component and letting render logic be handled by child component.

Question 47

A classic way to write a dataprovider-component (recieving) children as function?

Answer 47

const dataProvider = ({children}) => {
    const data = fetchData() //  Some function to actually fetch the data
    return children(data) // Return a call to the `children` function passed
} 

Question 48

How to use a dataprovider-component?

Answer 48

<DataProvider>
    {(data) => <ChildComponentName data = {data} /> }
<DataProvider/>

Question 49

What’s the difference between render props and children as function?

Answer 49

They are closely related react-patterns with the same goal of avoiding prop drilling. The difference is that a render prop-component takes a prop that is a function while a children as function-component uses the children prop itself as a function.

Render prop:

```
<DataProvider render={(data) => <DisplayData data={data} />} />
~~~

Children as function:

```

<DataProvider>
{(data) => <DisplayData data={data} />}
</DataProvider>

~~~

Question 50

What’s a higher order component (HOC)?

Answer 50

A function that takes a component and returns a new component with additional props.

Question 51

What’s the advantage of HOCs?

Answer 51

They allow you to add functionality to a component without modifying them directly.

Question 52

How does a HOC work?

Answer 52

It’s a function that takes a component as argument and returns a new function component with some alteration.

Question 53

How to use a HOC?

Answer 53

Assign it’s result to a const that can be used:

const NewAlteredComponent = higherOrderComponent(ComponentToAlter);

Now you can use <NewAlteredComponent/> in the react app with any additional props.

Question 54

Two reasons to use HOCs?

Answer 54

1. Separate concerns (data fetching (HOC) from presentation (component) ).
2. Reuse the HOC across multiple components that need same data.

Question 55

What is Component Inversion in react?

Answer 55

A pattern involving using controlled components. For example having a searchfield-component that takes a function for handling changes and update state in its parent. This makes the component more reuseable than having it handle the search itself.