React

Question 1

Wat zijn util functies?

Answer 1

Ondersteunende functies die in verschillende contexten werken

Question 2

Bij het nesten van componenten, hoe bepaal je de origin van het binnenhalen van data voor de child’s om te gebruiken?

Answer 2

Door te kijken waar deze data eenmalig opgehaald kan worden of waar de data zich bevindt.

Level 1 data
Level 4 data nodig
= level 1 data ophalen en doorsturen naar 4

Question 3

[react] useSWR() wat doet dit?

Answer 3

Dit is een native NextJS hook die aan de client-side data fetched en dit cached, hervalideerd, refetched op basis van intervals.

useSWR( ‘endpoint’, fetcher)

Question 4

[react] useWatch() wat doet dit?

Answer 4

Luistert naar de form fields die je hierin aangeeft. de control is dan de methods.control van de useForm methods.

useWatch(‘formFieldName’, control: methods.control)

Question 5

[react] useDebounce() wat doet dit?

Answer 5

Het vertragen van iets dat je uit wilt voeren zoals functies en states totdat de tijd verstreken is.

useDebounce( functie, 1000 )

Question 6

[React] Wat gaat er mis in onderstaande code als je de waarde van displaycartPageUiExperiment wilt gebruiken in CheckoutReceipt:

<CheckoutReceipt
displayCartPageUiExperiment
disableCoupon
disableShowDetails
disableShowDetailsLarge
disableTitle
isEmptyCart={isEmptyCart}
isCart
cart={cart}
shippingMethodName={
cart?.deliveries[0]?.shippingMethod?.name ??
cart?.deliveries?.[0]?.shippingMethod?.translated?.name ??
null
}

Answer 6

displayCartPageUiExperiment geeft nu een boolean = true mee. Dit moet de variabele waarde meekrijgen:

displayCartPageUiExperiment={displayCartPageUiExperiment}

Question 7

[react] hoe heet het specifiek gebruiken van property waarden?

Zoals { value, onclick } ipv props.value en props.onclick

Answer 7

Destructuring

Question 8

[react] useContext wat doet dit?

Answer 8

Dit is een boilerplate van react om een context provider te wrappen om een component. Hierdoor zijn waardes in de context in alle geneste componenten ook beschikbaar. Dus hoef je geen props door te geven.

Question 9

[react] waarom maar maximaal 5 properties per component?

Answer 9

Omdat het anders te complex wordt.
Te veel rerenders.
Te veel verantwoordelijkheid en dus risico op het breken van de applicatie.

Question 10

[react] hoe voorkom je een 0 in je UI?

Answer 10

Door ternary operators te gebruiken. Hierdoor van je de lege State af met een null.

Dus: count ? Component : null
Ipv: count && component

Question 11

[react] hoe ga je om met het mappen van een lijst in de render?

Answer 11

Door de lijst componenten samen te voegen in de lijst component wrapper. Die is leesbaarder.

<ArticlesList articles={articles} />

Question 12

[react] waar definieer je het beste de props voor een component?

Answer 12

Op het moment dat je de props destructured bij het maken van het component:

function Component({ title = ‘’, tags = [], subscribed = false }) {

Question 13

[react] wat is een logische bestandsstructuur?

Answer 13

Maak een domains of modules map.
Plaats daarin mappen zoals common of dashboard.
Daarin plaats je onder andere component mappen.
// 👍 Move them in their own folder
├── components
├── Header
├── index.js
├── Header.jsx
├── Header.scss
├── Header.test.jsx
├── Footer
├── index.js
├── Footer.jsx
├── Footer.scss
├── Footer.test.jsx

Question 14

[react] how to update a value in a isViewport function callback after it has been set when loading the component?

Answer 14

By using a useRef for the value you want to update. This surpasses the borders of closures. As it will be working as a kind of ‘live feed’.