1
Q
React is breaking code apart into pieces called…
A
components
2
Q
What are the 5 steps of Thinking in React?
A
- Break the UI in to a component hierarchy
- Build a static version in React
- Find the minimal but complete representation of UI state
- Identify where your state should live
3
Q
Break the UI in to a component hierarchy. What are the three different ways to do so?
A
- 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
- CSS. Consider what would you make class selectors for
- Design. Think how you would organize the design’s layers
4
Q
Find the minimal but complete representation of UI state. What questions would you ask?
A
- Does it remain unchanged over time? If so, it isn’t state.
- Is it passed in from a parent via props? If so, it isn’t state.
- 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.
5
Q
What is a component in React?
A
Piece of reusable code that represents a part of a user interface
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
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 <></>
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
9
Q
What are props?
A
Props are information that you pass to a JSX tag
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
11
Q
In what do you wrap around JS variable so you could use it in JSX?
A
Curly braces {}
12
Q
style={{}} is not special syntax in JSX. What is it?
A
It is an object inside JSX curly braces
13
Q
What JS features do you usually rely on when you want to render lists in React?
A
For loop or map() function
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
15
Q
In React where should the key attribute come from?
A
It should be coming from your data, such as database ID
16
Q
In React what shall you do if you want your components to remember some information and display it?
A
useState
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
18
Q
In React what are called Hooks?
A
Functions starting with use. For example useState is a built-in hook
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
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
21
Q
React components are regular JavaScript functions except: (2)
A
- React functions start with capital letter
- React component returns JSX markup
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)
23
Q
What are the rules of JSX? (3)
A
- Return a single root element. To return multiple elements wrap them with a single parent tag
- Close all tags
- camelCase most of the things
24
Q
Where to use curly braces in JSX? (2)
A
- As text directly inside JSX tag
- As attributes immediately following the ‘=’ sign
25
In React with what you need to wrap props when passing them to another functions?
Curly braces {}
26
In React how can you specify a default value on prop? When is the default value being used?
Right after the parameter put '=' and then the value.
Default value is being used if the prop is missing or assigned as undefined
27
When you nest content in JSX content, in what prop the parent component will receive that information?
In prop called 'children'
28
In React, there are three ways how you can conditionally render JSX using JS syntax. What are they?
1. If statements
2. &&
3. ? and :
29
What to use when you want components to "remember" things?
useState Hook
30
What are event handlers?
They're functions which are triggered when interaction happens such as clicking, hovering, focusing form inputs etc.
31
You defined the handleClick function and then passed it as a prop to
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
Functions passed to event handlers must be passed, not called. Why?
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
Built-in components like
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
In what way does the event propagation go?
it starts with where the event happened, and then goes up the tree.
35
With what can you stop event propagation?
e.stopPropagation()
36
With what can you stop default behavior some browser events have? (For example, a
e.preventDefault()
37
The handleClick event handler is updating a local variable, index. But two things prevent that change from being visible. What are they?
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
To update a component with new data, what two things need to happen?
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
What does useState Hook provides?
1. A state variable to retain the data between renders
2. A state setter to update the variable and trigger the render again
40
When are the Hooks available?
While React is rendering
41
Where can Hooks be called?
Only at the top level of your components. You can't call them inside conditions, loops or other nested functions.
42
State is private to the component. If you render it in two places...
... each copy gets its own state.
43
What are the three steps of requesting and serving UI in React?
1. Triggering a render
2. Rendering the component
3. Committing to the DOM
44
After its initial render, how can you trigger further renders in React?
by updating its state with the set function. Updating your component’s state automatically queues a render.
45
What is rendering in React?
It is React "calling" your components, which is a function.
46
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
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
Doe state variable’s value changes within a render?
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
How long does React wait until processing your state updates?
Until all code in the event handlers has run
49
What is batching in React?
when React groups multiple state updates into a single re-render for better performance.
50
If you would like to update the same state variable multiple times before the next render, what could you do? (in react)
You can pass a function that calculates the next state based on the previous one in the queue.
Because you can't use this:
since each render's state values are fixed, meaning all those three 'number' variables are 0.
So you can do this:
51
If you want to update an object or array in React, what should you do?
Make a new object (or a copy of existing one) and set the state to use that copy
52
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;
}}
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
When updating arrays in React, you should not use mutation. What should you not do then?
1. You should not reassign array
2. You should not use methods such as pop(), push(), splice() etc.
54
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...
1. concat, [arr...] for adding
2. filter, slice for removing
3. map for replacing
4. copy the array first for sorting
55
If you want to add sth to the array in React, what would be the best way to approach this?
Use spread syntax.
setNew{
...currentArray,
{ id: 5, name: 'new element in array'}
}
56
Metaphorically in React, how declarative UI compares to imperative? (use driver and passenger metaphor)
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
What are the five steps of declarative thinking in React?
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
First step in declarative thinking in React is identifying your component's different visual states. What means?
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
Second step in declarative thinking in React is determining what triggers those state changes. What means?
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
You can trigger state updates in response to two kinds of inputs. What are they?
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
Third step in declarative thinking in React is to represent the state in memory with useState. What means?
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
Fourth step in declarative thinking in React is to remove any non-essential state variables. What means?
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
Fifth step in declarative thinking in React is to connect the event handlers to set state. What means?
Create event handles to set the state variables
64
To coordinate two components at the same time, what steps should be done? (3)
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
Difference between controlled and uncontrolled components in React?
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
State is not kept in JSX tag. With what it is associated with?
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
with
67
How can you reset state? (2)
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
Reducers are a different way to handle state. You can migrate from useState to useReducer in three steps: (briefly explain each one)
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
Reducers must be pure. What does that mean?
Same inputs always result in the same output. They should update object and arrays without mutating them.
70
With reducer in React, what does each action describe?
a single user interaction.
71
If you want to mutate reducers in React, what could you use?
Immer
72
In React what context lets the parent component do?
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
In React what are the three steps of making context?
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
Why is ref special in React?
It lets your component "remember" information without re-rendering
75
How you can access current ref value?
ref.current
76
What are the differences between refs and states?
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
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
You can use ref. Each component will get its own ref, so it won't conflict
JavaScript
flashcards
Decks in class (10)
# Cards
-
Key Links
-
Subjects
-
Company
-
Find Us
-
