KCD - Epic React / Articles Flashcards
1
Q
What is a nullish coalescing operator?
A
“<div>Sometimes you want to fall back to a default value if a value is null or undefined.</div><div><br></br></div><div>This would look like this:</div><div><img></img><br></br></div><div><br></br></div><div>But that was problematic for numbers or booleans where ““0”” or ““false”” could be valid values. So then we used to have to do this:</div><div><img></img><br></br></div><div><br></br></div><div>Now, we have a double question mark:</div><div><img></img><br></br></div><div><br></br></div><div>This returns the right side whenever the variable on the left side is null or undefined (not just falsey) - if the left side is 0 or falsey, it returns that instead.</div>”
2
Q
How do you append directly to the page (instead of an element on the page)
A
“<div><img></img><br></br></div><div><span></span></div>”
3
Q
What is special about the children prop with React.createElement?
A
It is a special prop where if you have one element, that’s fine, but if you want multiple elements, you can either just keep adding arguments to createElement and they all get slurped up and thrown into children, or you can provide it as an array - either way it converts it into an array. (This will be useful when creating custom components)<br></br><br></br><br></br>
4
Q
Why do we have to use Babel?
A
Because JSX is not actually Javascript, so Babel is the code compiler that converts it into React.
5
Q
What two things from JavaScript cannot go inside JSX curly braces?
A
You can’t do if/else conditionals, and you can’t define variables - that would have to happen above in Javascript land.
6
Q
What is a component, really?
A
Basically just a JS function which returns something that is renderable (more React elements, strings, null, numbers, etc.)
7
Q
In order for JSX to interpret a function between angle brackets as a component, what is allowed?
A
- The function starts with a capital letter<div>2. OR a lower or uppercase with a dot proprty</div><div>3. OR an Upper_Snake_Case name</div>
8
Q
What is the purpose of propTypes?
A
They give an error when we passed the wrong value (or no value) to a component.
9
Q
What happens if I pass the wrong kind of value into a prop typed component while in production?
A
Nothing. Prop Types add runtimee overhead, so they aren’t run in production.
10
Q
How do you implement PropTypes?
A
“It’s a package made available through React. To use it, imagine a component named Message that requires it’s two props to be strings and to both be passed.<div><br></br></div><div><img></img><br></br></div>”
11
Q
How is the style prop different between HTML and React?
A
“In HTML you pass a string of CSS, while in React you pass an object of CSS.<div><img></img><br></br></div>”
12
Q
Where does your form’s onSubmit function go?
A
On the form element itself, not on the submit button.
13
Q
What do you need to add to an input and a label to associate them together?
A
The label needs an htmlFor= tag that matches the input’s id.
14
Q
What does the browser do by default when a form is submitted?
A
It makes a GET request to the current URL with the values of the form as query parameters in the URL, which then causes a full page refresh. (only named values are submitted)
15
Q
What is a SyntheticEvent?
A
Not a real event from the browser, but an object that React creates for us that looks and behaves exactly like a regular event. You likely won’t know the difference - they do this for performance reasons, and for event delegation.
16
Q
How can you get the value of an individual input on a form?
A
event.target[0].value - where the index of the array will depend on which input you are trying to get it from.
17
Q
What should you do instead of accessing inputs by targeting the order in which they appear on the form and why?
A
Instead, you should name your inputs, and then whatever you have given as the name or id is accessible by the form as form.name, you should do this because it is much more change resillient (if the order changes, you’re still ok.)<div><br></br></div><div><br></br></div>
18
Q
Why is it better to give all form inputs an id instead of a name?
A
Either will associate the input as a call-able item on the form, but screen readers need the label to be associate to the input, and in addition, if your labels aren’t tied to inputs through their htmlFor matching the input’s id, then when you click the label, it won’t go to the input, which usually you do want to happen.
19
Q
What is a ref?
A
A ref is an object that stays consistent between renders of your React component.
20
Q
What is the value on a ref that can be updated to any value at any time?
A
ref.current
21
Q
Say you have an inputRef object created - how could you access the value?
A
inputRef.current.value
22
Q
Describe useRef in terms of a box.
A
it’s like a box that can hold a mutable value in its .current value.<div><br></br></div>
23
Q
What happens if you pass a ref object to React (like <div></div>
A
React will set its .current property to the corresponding DOM node whenever that node changes.
24
Q
How is useRef helpful beyond just the ref attribute on an input?
A
useRef is handy for keeping any mutable values around, similar to an instance field in a class.
25
What is the difference between useRef and creating your own {current: ...} object?
useRef will give you the same ref object on every render.
26
What should you keep in mind with regards to useRef?
It doesn't notify you when its content changes. Mutating the .current property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM nodse, it's probably better to use a callback ref instead.
27
What is a Controlled Form Input?
A Controlled Form Input allows you to programattically control your input. Maybe you want to set the value explicitly at the push of a button, or change what the value is as the user types.
28
How do you explicitly update the value of an input?
React allows us to to set a value prop on the input, like so:
With that done, the value set can only change if the value of the myInputValue variable changes.
29
What happens if you have an input with a value but no onChange handler?
The input becomes read only since there is no way to change the value based on input.
30
How do you pre-fill a form input?
Just provide the defaultValue prop to the input.
31
What is the issue with rendering elements by mapping over an array?
It's totally fine, but when you're interpolating an array of renderable elements, if you re-render that list with added or removed items, React isn't able to know whether you added/removed from the middle, beginning, end, or whatever of that array. React just has to take its best guess - which sometimes works out ok, sometimes doesn't.
32
What happens when rendering inputs by mapping over an array without a key?
There is state that exists in the that is managed by the browser, not by React. Without a key, React has no idea which element you return corresponds to the specific DOM node it removes.
33
How do you fix array rendered elements that don't have a key getting all mixed up about which input goes with which element?
Just add a key to the list item (or whatever) being rendered - you can set it to the id of the item.
34
How does React hold state?
With special functions called hooks.
35
What are the two most prominent examples of React Hooks that return a value?
React.useRef & React.useContext
36
What does React.useEffect return?
Nothing a'tall
37
What is the definition of State?
Data that changes over time.
38
Why doesn't it work to just declare a variable and use it within the JSX where you'd like it to display on change?
Because a normal function is only run one time - when the component is initially rendered. There's no mechanism to tell React that the value has changed - that's where useState comes in.
39
What's the use of React.useState?
It tells react to re-render anytime the value given changes (as opposed to just declaring a variable, which only renders on page load), and gives us an easy method with which to change it.
40
How do you set a default value for a destructured variable?
"![]()
"
41
How do we interact with local storage or make http requests?
Using the useEffect hook.
42
What is React.useEffect?
"A built-in hook that allows you to run some custom code after React renders (and re-renders) your component to the DOM. It accepts a callback function which React calls after the DOM has updated.
![]()
"
43
What's a problem with reading from localStorage?
It can be slooow.
44
Can you pass a function to the useState hook instead of an initial value?
Yes, and the benefit is - that function only gets run the first time, so things that are unnecessary in further renders can be put there.
45
What is lazy state initialization?
"React’s useState hook allows you to pass a function instead of the actual value, and then it will only call that function to get the state value when the component is rendered the first time.
![]()
"
46
What if you only want useEffect to run when a particular value changes?
React.useEffect takes a second argument called the 'dependency array', which signals to React that your effect callback function should be called when and only when those dependencies change. This saves us from doing unnecessary work.
47
What's the catch when an object is in the dependency array of a useEffect?
React does a shallow comparison within the dependency array, so if you are dependent upon an object, and you have two objects with all the same properties, it will re-run the useEffect, even if they are exactly the same.
48
What does useRef give you?
An object that you can mutate without triggering re-renders.
49
Describe React's hook flow
"![]()
"
50
What is the first thing React will do when the component has never been rendered before?
Run the lazy initializers (function arguments passed into useState or useReducer
51
What is the hook flow on component mount?
1. Run lazy initializers.
2. Render
3. React updates the DOM
4. Run LayoutEffects
5. Browser paints the screen.
6. Run Effects
52
What is the hook flow on Component Update?
1. Render
2. React Updates DOM
3. Cleanup LayoutEffects from last time
4. Run LayoutEffects
5. Browser paints the screen
6. Cleanup effects.
7. Run Effects.
53
What is the React Hook Flow on component unmount?
1. Cleanup LayoutEffects
2. Cleanup Effects.
54
How do you share state between two sibling components?
You lift the state to the lowest common parent between them, and place the state assignment there, and then passing the statee and a mechanism for updating it down to the child components that need it.
55
What is co-locating state?
Pushing state back down when it is no longer needed at a higher level - this isn't strictly needed and will work fine passing it down, but it's best to always keep state as close as possible to where it's used. So, if it's no longer used at a higher level, we have to push it back down to the lower levels.
56
Why is it important to colocate state? (Keep state as close as possible to where it is used?)
It improves maintenence - you can use the component more easily with the state maintained within the component - you don't have to do something above it each time to pass in. This makes the API much simpler, and encapsulates the management of the component's own state to itself.
This also can lead to some performance improvement, as changes to the child won't necessitate the parent to re-load, only the child would re-render.
57
Is each call to React.useState unique?
Yes, it gives you a unique state and updater function, even if they have the same name as the state and updater in a sibling component.
58
What is the difference between managed state and derived state?
Managed state is state that you need to explicitly manage.
Whereas derived state is state that you can calculate based on the status of other state.
59
Why should you derive state instead of syncing it?
To avoid synchronization bugs and unnecessary complexity.
60
What is derived state?
State that can be derived (or calculated) based on other values rather than managed on its own.
61
What's the first thing to do when building a new UI?
Make sure the state is managed, and that the UI is rendering properly.
62
Why is mutation of state a problem in React?
It leads to unexpected bugs. React relies on the fact that any state change will trigger a re-render. Mutation can lead to stale, out of sync closures which reference the mutated value instead of the state value, and that leads to hard to track down bugs.
Instead, make copies of state, rather than mutating it.
63
What do you need to do to objects, array, etc. - things that aren't strings - when saving to local storage?
JSON.stringify, and then JSON.parse when you pull them back out again.
64
Is JSON parsing something out of localStorage on every update of state awesome?
Probably not, chief.
65
What kind of access do you have to DOM nodes in your react render() method?
None.
hi
is just syntactic sugar for React.createElement() - you don't actually have access.
66
When are DOM nodes actually created within React?
Not until the ReactDOM.render method is called - you don't have access to them prior to that (in the render() method, for instance)
Your component's render method is really just responsible for creating and returning React Elements and has nothing to do with the DOM in particular.
67
How can you gain access to the DOM?
Using a special prop called ref.
This asks React to give you access to a particular DOM node when it renders your component.
68
How do you use useRef and useEffect together, and why?
"Here's a simplified example:![]()
After the component is rendered, that's when it is considered mounted. After mount is when the useEffect callback is called - so, by that point, ref's current property should be set to the DOM node. Thus, we have access to whatever element we needed within our useEffect.
"
69
How do you give third-party libraries that need access directly to DOM nodes that access?
Using a combination of useRef and useEffect.
70
What do you need to remember after you use direct DOM nodes with useRef & useEffect?
You'll need to clean up after yourself on unMount, or you'll have event handlers hanging around on DOM nodes that are no longer in the document.
71
What happens if you put a useRef onto a node, but then try to call it directly, without a useEffect?
It would be undefined (or whatever initial value you gave it) because it hasn't yet rendered to the page at that point - that's why we end up using a useEffect to work with it, because that is called after mount, which is after render.
72
When do you use the useRef hook?
Any time you want to maintain a reference to something, and you want to be able to make changes to that without triggering a re-render.
If you DO want to trigger a re-render, you should probably just use useState.
73
What can you return from the useEffect hook?
Nothing - except the cleanup function.
74
How does the fact that you can't return anything from a useEffect hook affect async/await?
"![]()
Async/Await doesn't work, because when you make a function async, it automatically returns a promise (whether you explicitly return a function or not).
"
75
If you do want to use Async/Await within a useEffect, how should you?
"Just make sure it is fully contained within the useEffect - don't declare the opening function as async, instead declare a separate async/await within the useEffect. Like thus:
![]()
That way, you return nothing, as useEffects should, rather than returning a promise from the async/await.
"
76
What's an easier way to do async/await stuff within useEffect hooks?
Extract all the Async code into a utility function, then call that and use the promise-based .then method instead of async/await syntax.
77
Why should use a status or state machine instead of an isLoading boolean?
Because using isLoading can easily get out of sync and requires being extremely careful about when you set it in order to get the desired result.
78
What statuses should you use?
idle, rejected, pending, resolved
79
Where can you go to see Graphql errors when they aren't showing anything in the display?
Queries that fail will be red on the network tab - click on those and it will show you the error.
80
If you are setting multiple instances of state (say, setting date and a status at the same time), this can cause errors when you do it out of order.
What is a simpler way to handle this and make errors less likely?
"Put all of your state into an object so that they are updated simultaneously.
![]()
![]()
"
aka not this:
but this:
81
What happens if a render throws an error and it is unhandled by your application?
You application will be removed from the page, leaving the user with a blank screen...awkward.
82
What is the special kind of component that is perfect for handling errors in your application?
An Error Boundary.
83
How do you create an Error Boundary with a function call?
Currently, you can't. You have to use a class component, unfortunately.
84
How do you get React to hand an error to the error boundary?
You put 'throw error' in the code.
85
What are Error Boundaries?
React component that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
86
What do Error Boundaries not catch errors for?
- Event handlers
- Asynchronous code (e.g.
setTimeoutorrequestAnimationFramecallbacks) - Server side rendering
- Errors thrown in the error boundary itself (rather than its children)
87
What makes a class component an Error Boundary?
It must define either (or both) of the lifecycle methods 'static getDerivedStateFromError()' or componentDidCatch()
88
What are the uses of getDerivedStateFromError() and componentDidCatch() life cycle methods?
getDerivedStateFromError() is used to render a fallback UI after an error has been thrown.
componentDidCatch() is used to log error information.
componentDidCatch() is used to log error information.
89
Define Error Boundaries in terms of JS
They're similar to a JS catch{} block, but for components.
90
Why does React unmount the whole React component tree when an Error is not caught by an error boundary?
Because it is worse to leave corrupted UI in place than to completely remove it.
91
Why use an Error Boundary over a try / catch?
Try / Catch is great, but only works for imperative code - React components are declarative and specify what should be rendered.
92
Why don't Error Boundaries work for event handlers?
Unlike render and lifecycle methods, event handlers don't occur during rendering - so, if they throw an error, React still knows what to display on screen.
So, if you need to catch an error on an event handler, you should just use the regular JS try / catch.
So, if you need to catch an error on an event handler, you should just use the regular JS try / catch.
93
What must every class component have?
A render function
94
How can you get a component to unmount and remount?
By sending it a unique key prop - then, whenever that prop changes, it will unmount and re-mount the component.
95
What is the problem with using the key prop to reset a component?
It will re-mount not only the child element, but also the parent that is passing the key on.
96
What is the react-error-boundary prop to allow it to reset state whenever certain keys change?
resetKeys (passed in as an array to ErrorBoundary)
97
How can you tell ErrorBoundary what to do whenever the error is re-set?
You can pass an onReset prop into the ErrorBoundary component.
98
How do you define what should be displayed by react-error-boundary whenever an error is hit?
The ErrorBoundary component takes a FallbackComponent prop which can be set to whatever component you would like displayed.
This component will then be supplied with the error as well as a resetErrorBoundary function which can be used to reset the ..error boundary (and clear the error from state so that it can be tried again)
This component will then be supplied with the error as well as a resetErrorBoundary function which can be used to reset the ..error boundary (and clear the error from state so that it can be tried again)
99
What is the basic definition of a test?
Code that throws an error when the actual result of something doesn't match the expected output.
100
What are the easiest things to test?
Pure functions - there's no DB setup and nothing has to be rendered prior to testing
101
What is an assertion?
The part of a test that says what result you expect the actual code to pass.
102
What is the best way to ensure that your tests are actually covering your app?
The more your tests resemble the way your software is used, the more confidence they can give you.
103
Why is testing implementation details bad?
"It can break when you refactor application code - false negative
or, it may not fail when you do break application code - false positive
The test is simply ""does the software work""
"
104
Why is it important to clean up your DOM by removing whatever is on it?
If you don't clean up, then it could impact other tests and/or cause a memory leak.
105
How do you clean up your enviroment between each test so that your tests can run in total isolation from each other?
Make sure you wipe the DOM and unmount components, using a beforeEach block is handy.
106
Instead of calling .click() within your tests, what should you do instead to more closely emulate how React works?
"You should, instead, dispatch an event. Not all events have dot methods available (like mouseover), and dispatching an event when a button is clicked is how Reacy actually does it.
![]()
"
107
Within react-testing-library, what does container give you, and how do you use it?
"container is the div that your component has been mounted onto -
![]()
"
108
What is the syntax to fire different events within react-testing-library?
"![]()
"
109
Within react-testing-library, how do you log the current state of the DOM (with syntax highlighting, no less)
screen.debug()
110
Why don't you have to clean up the DOM when using react-testing-library?
It has an auto-cleanup feature, so you're gucci
111
What all does react-testing-library's render function do?
It creates the root div, it renders the div using ReactDOM.render, and then returns that div as the container property that we get back. In addition, it keeps track of that div and all components mounted to it and unmounts them and clears the div so we don't have to worry about clean-up.
112
In react-testing-library, what is the assertion to test the text on a page?
"![]()
"
113
What is the main thing to avoid if you want to test your apps in the way that they are used?
Don't test implementation details.
114
Why should you not use things like firstChild when accessing which elements on the container to test?
Because that is implementation - if we move the element around at all, our tests break, even though they still function fine.
115
What is a better solution than order-based than container.firstChild and the like?
screen.getByText() will grab whatever has that text content or even better:
screen.getByRole('button', {name: '0'})
116
What are the two reasons that testing implementation details is bad?
- They can break when you refactor application code. False negatives
- They may not fail when you break application code. False positives
117
"With react-testing-library, what is the following testing?![]()
"
This tests, rather brilliantly, that the default is set, and that when you click on the accordion it hides the one and shows the other - it doesn't care a bit about how that code was implemented.
118
What should our tests typically deal with, given that our two users are users coming to the page and developers trying to use our component?
What's rendered to the page, for our users - and the props that are passed in for the developers (easy cues when they forget a prop or misuse one)
119
What is the process to know what to test?
"
- What part of your untested codebase would be really bad if it broke? (The checkout process)
- Try to narrow it down to a unit or a few units of code (When clicking the ""checkout"" button a request with the cart items is sent to /checkout)
- Look at that code and consider who the ""users"" are (The developer rendering the checkout form, the end user clicking on the button)
- Write down a list of instructions for that user to manually test that code to make sure it's not broken. (render the form with some fake data in the cart, click the checkout button, ensure the mocked /checkout API was called with the right data, respond with a fake successful response, make sure the success message is displayed).
- Turn that list of instructions into an automated test.
120
What does react-testing-library getBy return?
The first matching node for a query, and they throw an error if it either founds no matching nodes, or if it finds more than one match.
121
What is the react-testing-library query to return an array of all matching nodes and throw an error if none are found?
getAllBy
122
How does the findBy and findAllByquery work within react-testing-library?
"
findBy* queries return a promise which resolves when an element is found which matches the given query. The promise is rejected if no element is found or if more than one element is found after a default timeout of 1000ms."
123
What arguments can a react-testing-library query take?
A string, a regular expression, or a function
124
What are the three types of queries (that work with all the options) in react-testing-library
getBy/getAllBy, queryBy/queryAllBy, findBy / findAllBy
125
What is the screen object that is exported from from @testing-library/dom ?
"It gives you every query pre-bound to the document.body. You can use it like this:
"
const exampleInput = screen.getByLabelText(/example/i)
126
If you need to debug within your test how can you do it?
"If you import screen from @testing-library/dom then it makes available screen.debug() which is a shortcut for console.log(prettyDOM()) and can be used like this:
![]()
"
127
"What is wrong with this react-testing-library query?![]()
"
It assumes the buttons will always be in the same position and we won't ever add any more buttons - it'd be better to query them by the text of their button.
128
If you are grabbing elements by name in react-testing-library, what's a good idea to make your test more flexible?
"Instead of just searching for a string, search for a case insensitive regex, because the user probably doesn't care if it is capitalized or not.
![]()
"
129
Which query should you use?
Generally, go down this order until you reach one possible:
1. Queries Accessible To Everyone
a. getByRole (almost always)
b. getByLabelText (Use for form fields)
c. getByPlaceholderText (If there's no label for some reason)
d. getByText (not useful for a form, but how a user finds most
non-interactive elements.)
e. getByDisplayValue (useful for the current value of a form
element, useful when navigating a page with filled-in values.
2. Semantic Queries (getByAltText, getByTitle)
These are ARIA compliant, so that's cool, but the user experience of these values varies greatly by browser and assistive technology.
3. Test IDs (getByTestId)
If you can't match by role or text (maybe the text is dynamic) - ok, but the user can't see or hear these, so you aren't mimicking their experience.
130
What website can help if you aren't sure how to query something?
testing-playground.com
131
Instead of using fireEvent.click, what is a better tool that launches all of the different events that a real user would?
userEvent.click - but we have to import it from @testing-library/user-event for now, though it may one day be incorporated.
132
If some input isn't important to the functionality, what should you do for any variables involved?
"To clarify to future folk that the input doesn't matter, you can generate it with a library called faker.
"
const {username, password} = buildLoginForm()
133
What is an Object Mother or Test Factory Builder Function?
"It's a function within your tests where you set up the data that will be necessary for testing.
![]()
"
134
How can you build flexibility into a Test Mother (a function setting database fields)
"If you have it accept an overrides, and then just spread that at the bottom of the return, it will allow you to pass in any of the fields and have them be set instead of the default.
![]()
"
135
What is a good way to think of complex components?
Think about and s (though that is HTML, not JS) - They don't work without each other, but they are expressed in a way that is very readable and declarative.
