KCD - Epic React / Articles Flashcards
What is a nullish coalescing operator?
“<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>”
How do you append directly to the page (instead of an element on the page)
“<div><img></img><br></br></div><div><span></span></div>”
What is special about the children prop with React.createElement?
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>
Why do we have to use Babel?
Because JSX is not actually Javascript, so Babel is the code compiler that converts it into React.
What two things from JavaScript cannot go inside JSX curly braces?
You can’t do if/else conditionals, and you can’t define variables - that would have to happen above in Javascript land.
What is a component, really?
Basically just a JS function which returns something that is renderable (more React elements, strings, null, numbers, etc.)
In order for JSX to interpret a function between angle brackets as a component, what is allowed?
- 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>
What is the purpose of propTypes?
They give an error when we passed the wrong value (or no value) to a component.
What happens if I pass the wrong kind of value into a prop typed component while in production?
Nothing. Prop Types add runtimee overhead, so they aren’t run in production.
How do you implement PropTypes?
“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>”
How is the style prop different between HTML and React?
“In HTML you pass a string of CSS, while in React you pass an object of CSS.<div><img></img><br></br></div>”
Where does your form’s onSubmit function go?
On the form element itself, not on the submit button.
What do you need to add to an input and a label to associate them together?
The label needs an htmlFor= tag that matches the input’s id.
What does the browser do by default when a form is submitted?
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)
What is a SyntheticEvent?
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.
How can you get the value of an individual input on a form?
event.target[0].value - where the index of the array will depend on which input you are trying to get it from.
What should you do instead of accessing inputs by targeting the order in which they appear on the form and why?
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>
Why is it better to give all form inputs an id instead of a name?
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.
What is a ref?
A ref is an object that stays consistent between renders of your React component.
What is the value on a ref that can be updated to any value at any time?
ref.current
Say you have an inputRef object created - how could you access the value?
inputRef.current.value
Describe useRef in terms of a box.
it’s like a box that can hold a mutable value in its .current value.<div><br></br></div>
What happens if you pass a ref object to React (like <div></div>
React will set its .current property to the corresponding DOM node whenever that node changes.
How is useRef helpful beyond just the ref attribute on an input?
useRef is handy for keeping any mutable values around, similar to an instance field in a class.
What is the difference between useRef and creating your own {current: …} object?
useRef will give you the same ref object on every render.
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.
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.
How do you explicitly update the value of an input?
React allows us to to set a value prop on the input, like so:<div><div><br></br></div><div>With that done, the value set can only change if the value of the myInputValue variable changes.</div></div>
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.
How do you pre-fill a form input?
Just provide the defaultValue prop to the input.
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.
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.
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.
How does React hold state?
With special functions called hooks.
What are the two most prominent examples of React Hooks that return a value?
React.useRef & React.useContext
What does React.useEffect return?
Nothing a’tall
What is the definition of State?
Data that changes over time.
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.
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.
How do you set a default value for a destructured variable?
“<img></img>”
How do we interact with local storage or make http requests?
Using the useEffect hook.
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.<div><br></br></div><div><img></img><br></br></div>”
What’s a problem with reading from localStorage?
It can be slooow.
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.
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.<br></br><div><br></br></div><div><img></img><br></br></div>”
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.
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.
What does useRef give you?
An object that you can mutate without triggering re-renders.
Describe React’s hook flow
“<img></img>”
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
What is the hook flow on component mount?
- Run lazy initializers.<div>2. Render</div><div>3. React updates the DOM</div><div>4. Run LayoutEffects</div><div>5. Browser paints the screen.</div><div>6. Run Effects</div>
What is the hook flow on Component Update?
- Render<div>2. React Updates DOM</div><div>3. Cleanup LayoutEffects from last time</div><div>4. Run LayoutEffects</div><div>5. Browser paints the screen</div><div>6. Cleanup effects.</div><div>7. Run Effects.</div>
What is the React Hook Flow on component unmount?
- Cleanup LayoutEffects<div>2. Cleanup Effects.</div>
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.
