Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

JavaScript > React > Flashcards

React Flashcards

1
Q

React is breaking code apart into pieces called…

A

components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the 5 steps of Thinking in React?

A
  1. Break the UI in to a component hierarchy
  2. Build a static version in React
  3. Find the minimal but complete representation of UI state
  4. Identify where your state should live
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Break the UI in to a component hierarchy. What are the three different ways to do so?

A
  1. Programming. Technique for deciding if you should create a new function or object. You can follow the Single Responsibility principle, where a component should ideally do only one thing
  2. CSS. Consider what would you make class selectors for
  3. Design. Think how you would organize the design’s layers
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Find the minimal but complete representation of UI state. What questions would you ask?

A
  1. Does it remain unchanged over time? If so, it isn’t state.
  2. Is it passed in from a parent via props? If so, it isn’t state.
  3. Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!

What’s left is probably state.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is a component in React?

A

Piece of reusable code that represents a part of a user interface

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

export default function Square() {}

What does ‘export’ and ‘default’ mean?

A

export means that this function can be accessible form other files as well.
default means that this function is the main function in that file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

React components need to return a single JSX element. If you have for example three different components, what do you do?

A

You wrap them inside <div></div> or <></>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

React provides a special function called useState. What can you do with it?

A

you can call from your component to let it “remember” things

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are props?

A

Props are information that you pass to a JSX tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you tell difference between React component and HTML tags?

A

React components start with the capital letter whilst HTML is lowercase

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

In what do you wrap around JS variable so you could use it in JSX?

A

Curly braces {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

style={{}} is not special syntax in JSX. What is it?

A

It is an object inside JSX curly braces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What JS features do you usually rely on when you want to render lists in React?

A

For loop or map() function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

If you have a list of items in React, what should you give each and every item?

A

Key attribute. It gives each element an unique identification which helps to find that items among its siblings

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

In React where should the key attribute come from?

A

It should be coming from your data, such as database ID

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

In React what shall you do if you want your components to remember some information and display it?

A

useState

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

const [count, setCount] = useState(0);

Explain this.

A

You’ll get two things from useState, first parameter which is the current state and second parameter which allows you to change the current state. Right now the state is 0 because that’s what we passed there.

But if we want to change the count, we use setCount for that

Syntax is array destructing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

In React what are called Hooks?

A

Functions starting with use. For example useState is a built-in hook

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

In React how can you change data between components? (for example you want buttons to update the count together whenever anyone has pressed one of the buttons)

A

You put useState on top of the closest component which contains the buttons

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is markup? Name some markup languages

A

Set of tags assigned to elements which declare how elements should be displayed or how they relate to one another. JSX, HTML, XML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

React components are regular JavaScript functions except: (2)

A
  1. React functions start with capital letter
  2. React component returns JSX markup
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Why is React good in that sense that without it CSS, HTML and JS would all be in different files

A

It helps you put logic, rendering and markup in the same file so everything that considers for example a Button is all found in one place. And it helps to also isolate details that are unrelated (so that you wouldn’t have button and navbar markup in the same file or sth like that)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the rules of JSX? (3)

A
  1. Return a single root element. To return multiple elements wrap them with a single parent tag
  2. Close all tags
  3. camelCase most of the things
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Where to use curly braces in JSX? (2)

A
  1. As text directly inside JSX tag
  2. As attributes immediately following the ‘=’ sign
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

In React with what you need to wrap props when passing them to another functions?

A

Curly braces {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

In React how can you specify a default value on prop? When is the default value being used?

A

Right after the parameter put ‘=’ and then the value.
Default value is being used if the prop is missing or assigned as undefined

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

When you nest content in JSX content, in what prop the parent component will receive that information?

A

In prop called ‘children’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

In React, there are three ways how you can conditionally render JSX using JS syntax. What are they?

A
  1. If statements
  2. &&
  3. ? and :
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What to use when you want components to “remember” things?

A

useState Hook

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What are event handlers?

A

They’re functions which are triggered when interaction happens such as clicking, hovering, focusing form inputs etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

You defined the handleClick function and then passed it as a prop to <button>. What are the rules of event handler functions in React? (2)</button>

A
  1. Event handler functions are usually defined inside your components (you do not make them outside components as a separate function)
  2. Names start with ‘handle’, followed by the name of event (e.g. handleClick)
32
Q

Functions passed to event handlers must be passed, not called. Why?

A

Because calling it would fire the function immediately. Passing it as a prop will fire it only when the corresponding interaction is triggered (clicking or whatnot). This is because JavaScript inside the JSX { } executes right away.

33
Q

Built-in components like <button> and <div> only support browser event names like onClick. Is that gonna be the same case when you are building your own components in React?</button>

A

No. if you have a component Button, you can name their event handler anyway you like. By convention, event handler props should start with on, followed by a capital letter.

34
Q

In what way does the event propagation go?

A

it starts with where the event happened, and then goes up the tree.

35
Q

With what can you stop event propagation?

A

e.stopPropagation()

36
Q

With what can you stop default behavior some browser events have? (For example, a <form> submit event, which happens when a button inside of it is clicked, will reload the whole page by default)

A

e.preventDefault()

37
Q

The handleClick event handler is updating a local variable, index. But two things prevent that change from being visible. What are they?

A
  1. New changes on local variable won’t trigger renders. React does not understand that it has to render the component again with new data
  2. Local variables won’t persist during renders. When React starts to render second time, it renders from scratch without considering any changes to local variables
38
Q

To update a component with new data, what two things need to happen?

A
  1. You have to maintain the data between renders
  2. You need to trigger React to render the component with new data (re-render)
39
Q

What does useState Hook provides?

A
  1. A state variable to retain the data between renders
  2. A state setter to update the variable and trigger the render again
40
Q

When are the Hooks available?

A

While React is rendering

41
Q

Where can Hooks be called?

A

Only at the top level of your components. You can’t call them inside conditions, loops or other nested functions.

42
Q

State is private to the component. If you render it in two places…

A

… each copy gets its own state.

43
Q

What are the three steps of requesting and serving UI in React?

A
  1. Triggering a render
  2. Rendering the component
  3. Committing to the DOM
44
Q

After its initial render, how can you trigger further renders in React?

A

by updating its state with the set function. Updating your component’s state automatically queues a render.

45
Q

What is rendering in React?

A

It is React “calling” your components, which is a function.

46
Q

As a component’s memory, state is not like a regular variable that disappears after your function returns. State actually “lives” in React itself—as if on a shelf!—outside of your function

A

Ma lihtsalt panin selle mõtte siia, sest mismõttes tavalised muutujad kaovad pärast returnimist ära? Et nagu nad pole väljaspool scope saadaval? in that sense? aga componendid pole ka ju:d et selle teadmise puudumine muudab praegu asja veits keerulisemaks

47
Q

Doe state variable’s value changes within a render?

A

Never. The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it!

setNumber(0 + 5);
setTimeout(() => {
alert(0);
}, 3000);

Here, with setTimeout it takes the value 0 and alerts that. eventHandlers also run before rendering

48
Q

How long does React wait until processing your state updates?

A

Until all code in the event handlers has run

49
Q

What is batching in React?

A

when React groups multiple state updates into a single re-render for better performance.

50
Q

If you would like to update the same state variable multiple times before the next render, what could you do? (in react)

A

You can pass a function that calculates the next state based on the previous one in the queue.

Because you can’t use this:

  <button onClick={() => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  }}>+3</button>

since each render’s state values are fixed, meaning all those three ‘number’ variables are 0.

So you can do this:

  <button onClick={() => {
    setNumber(n => n + 1);
    setNumber(n => n + 1);
    setNumber(n => n + 1);
  }}>+3</button>
51
Q

If you want to update an object or array in React, what should you do?

A

Make a new object (or a copy of existing one) and set the state to use that copy

52
Q

Why you should use this:

onPointerMove={e => {
setPosition({
x: e.clientX,
y: e.clientY
});
}}

instead of this:

onPointerMove={e => {
position.x = e.clientX;
position.y = e.clientY;
}}

A

Because the second code modifies an existing object in state, which you don’t want to do. With setPosition, you:
1. Replace position with this new object
2. And render this component again

53
Q

When updating arrays in React, you should not use mutation. What should you not do then?

A
  1. You should not reassign array
  2. You should not use methods such as pop(), push(), splice() etc.
54
Q

In React, to change array, you should avoid:
1. push(), unshift() for adding, INSTEAD…
2. pop(), shift(), splice() for removing, INSTEAD…
3. splice(), arr[i] for replacing, INSTEAD…
4. reverse(), sort() for sorting, INSTEAD…

A
  1. concat, [arr…] for adding
  2. filter, slice for removing
  3. map for replacing
  4. copy the array first for sorting
55
Q

If you want to add sth to the array in React, what would be the best way to approach this?

A

Use spread syntax.
setNew{
…currentArray,
{ id: 5, name: ‘new element in array’}
}

56
Q

Metaphorically in React, how declarative UI compares to imperative? (use driver and passenger metaphor)

A

Imperative thinking - you get into the car and you tell step by step when and what turn to take.
Declarative thinking - you get into the car and you tell the driver destination, driver figures itself out how to get there (this is the thinking you should use in React)

57
Q

What are the five steps of declarative thinking in React?

A
  1. Identify your component’s different visual states
  2. Determine what triggers those state changes
  3. Represent the state in memory using useState
  4. Remove any non-essential state variables
  5. Connect the event handlers to set the state
58
Q

First step in declarative thinking in React is identifying your component’s different visual states. What means?

A

You should think about every visual state changes in the UI what the user might see.

Empty: Form has a disabled “Submit” button.
Typing: Form has an enabled “Submit” button.
Submitting: Form is completely disabled. Spinner is shown.
Success: “Thank you” message is shown instead of a form.
Error: Same as Typing state, but with an extra error message.

And then you want mock of those (may be just the visual part)

59
Q

Second step in declarative thinking in React is determining what triggers those state changes. What means?

A

You can trigger state updates in response to two kinds of inputs (human inputs, computer inputs). For those you need to create a state variable to update the UI.

For the form you’re developing, you will need to change state in response to a few different inputs:

  1. Changing the text input (human) should switch it from the Empty state to the Typing state or back, depending on whether the text box is empty or not.
  2. Clicking the Submit button (human) should switch it to the Submitting state.
  3. Successful network response (computer) should switch it to the Success state.
  4. Failed network response (computer) should switch it to the Error state with the matching error message.

https://beta.reactjs.org/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fresponding_to_input_flow.dark.png&w=750&q=75

60
Q

You can trigger state updates in response to two kinds of inputs. What are they?

A
  1. Human inputs. Button click, typing in a field, navigating a link
  2. Computer inputs, like a network response arriving, a timeout completing, an image loading.
61
Q

Third step in declarative thinking in React is to represent the state in memory with useState. What means?

A

Next you’ll need to represent the visual states of your component in memory with useState. Simplicity is the key, you would like as little useStates as possible. It’s easier to start with useStates that you know for sure that has to be there.

If you struggle to think of the best way immediately, start by adding enough state that you’re definitely sure that all the possible visual states are covered. Next step will help to reduce them

62
Q

Fourth step in declarative thinking in React is to remove any non-essential state variables. What means?

A

In third step you added useStates to make sure that every little visual change in the UI is covered. Now it is time to reduce duplication so you would only track what’s essential.
Spending a little time on refactoring your state structure will make your components easier to understand, reduce duplication, and avoid unintended meanings. Your goal is to prevent the cases where the state in memory doesn’t represent any valid UI that you’d want a user to see.

63
Q

Fifth step in declarative thinking in React is to connect the event handlers to set state. What means?

A

Create event handles to set the state variables

64
Q

To coordinate two components at the same time, what steps should be done? (3)

A
  1. Remove state from the child component
  2. Pass hardcoded data from the common parent (e.g. boolean isActive)
  3. Add state to the common parent and pass it down together with the event handlers
65
Q

Difference between controlled and uncontrolled components in React?

A

Component is uncontrolled when its parent cannot influence it (e.g. whether the component is active or not).
Component is controlled when its parent can influence it via props

66
Q

State is not kept in JSX tag. With what it is associated with?

A

with the tree position in which you put that JSX. It’s the position in the UI tree—not in the JSX markup—that matters to React!

You might expect the state to reset when you tick checkbox, but it doesn’t! This is because both of these <Counter></Counter> tags are rendered at the same position. React doesn’t know where you place the conditions in your function. All it “sees” is the tree you return. In both cases, the App component returns a <div> with <Counter></Counter> as a first child. This is why React considers them as the same <Counter></Counter>

67
Q

How can you reset state? (2)

A
  1. Render component in different positions (in UI tree)
  2. Resetting state with a key, they have to be different names (if necessary you can actually connect the components with the same key as well)
68
Q

Reducers are a different way to handle state. You can migrate from useState to useReducer in three steps: (briefly explain each one)

A
  1. Move from setting state to dispatching actions. Use dispatch({}) and write an object inside of it (it’s called an action object, you must include the type (which is a string) where you specify what the user just did there)
  2. Write a reducer function. Function takes two arguments: “your state” and “action”. Use switch/case between different action.type-s
  3. Use the reducer from your component. Replace useState with useReducer.
    const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
69
Q

Reducers must be pure. What does that mean?

A

Same inputs always result in the same output. They should update object and arrays without mutating them.

70
Q

With reducer in React, what does each action describe?

A

a single user interaction.

71
Q

If you want to mutate reducers in React, what could you use?

A

Immer

72
Q

In React what context lets the parent component do?

A

It lets you make information available to any component (no matter how deep in the tree) without having to passing it explicitly through props. In short, it lets parent component provide data to the entire tree below it

73
Q

In React what are the three steps of making context?

A
  1. create a context
  2. use that context from the component that needs the data
  3. provide that context from the component that specifies the data
74
Q

Why is ref special in React?

A

It lets your component “remember” information without re-rendering

75
Q

How you can access current ref value?

A

ref.current

76
Q

What are the differences between refs and states?

A
  1. ref doesn’t trigger re-render as states do
  2. refs are mutable, you can modify and update current’s value outside of the rendering process. States are immutable
  3. You shouldn’t read (or write) the current value during rendering with ref. If you want to read how many times a button has been clicked with ref, it simply just does not update
  4. useRef(initialValue) returns { current: initialValue }. useState(initialValue) returns the current value of a state variable and a state setter function ( [value, setValue])
77
Q

Ordinary variable is shared between all components but it may cause some conflicts. What can you use do to fix that issue? You don’t want it to trigger re-render

A

You can use ref. Each component will get its own ref, so it won’t conflict

JavaScript (10 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions