react.js Flashcards
What is Webpack?
it is a “bundler” which basically gathers large amounts of code from js files and npm packages into a single or few files
What is the advantage of using Webpack (or a similar bundler)?
easier to download, remove unused code, makes the code obscure so it is hard for people to decipher
What is Babel?
it is a transpiler, which translates new code to an older version. so in babel it translates new es6 js code into an older version
What is the advantage of using Babel (or a similar transpiler)?
it allows you to write code in the newer version while still being able to work with older devices and systems
What is React?
javascript library used for building UIs for web apps
What is a React element?
it is a component, basically its code that is like a custom dom element
How do you mount a React element to the DOM?
by using ReactDOM.createRoot and root.render
What is JSX?
JavaScript XML is a language that allows developers to write HTML-like code inside of a JS code
How does React use JSX to render components?
by using babel to transform the JSX to JS
What is a React component?
a custom DOM element
How do you define a component in React?
by defining a function with a capital letter?
How do you mount a component to the DOM (or “render” a component)?
ReactDOM.render
What are props in React?
passing information to their child components
How do you use props in a component?
pass in the props as the parameter as a destructured object
How do you pass props to a component?
add attributes to the component
How do you write JavaScript expressions in JSX?
by enclosing them in {}
How do you pass an event handler to a React component?
as one of the props
What is the naming convention for event handlers?
having a “handle” prefix
(ex. handleClick)
What are some custom event handler props a component may wish to define?
onClick, onSubmit, onChange
What is the naming convention for custom event handler props?
having a “on” prefix
(ex. onClick)
What are hooks in React?
functions that lets you use states in components
What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)
hooks starting with use can only be called at the top level of your component or your own hook, you can’t call Hooks inside conditions, loops, or other nested functions
What is the purpose of state in React?
to manage data within components in between function calls
Why can’t we just maintain state in a local variable?
if it is in a local variable the variable resets after it is run, react doesn’t know that the component’s state has changed
What two actions happen when you call a state setter function?
the state is updated and then re-rendered
When does the local state variable get updated with the new value?
the next time the useState is called and it is re-rendered
How do controlled components differ from uncontrolled components?
uncontrolled maintains its own internal state, the input updates its internal state to reflect the new value, and it needs to access the dom directly WHILE controlled components is controlled by the parent of the elements, the values are stored in the component’s state and is updated using event handlers
What are some advantages of using uncontrolled components?
simpler code, faster rendering
What are some advantages of using controlled components?
reliable, easy to integrate with api,
Which style do you prefer?
uncontrolled
What two props must you pass to an input for it to be “controlled”?
value, onChange
What are some popular npm packages for creating forms in React?
react hook form, formik, react final form
When would we want to create a list of React components?
If you have an array of data that needs to be displayed in a list
Why is it important for React components to be data-driven?
are able to respond to changes in data more efficiently and accurately, basically the component will automatically re-render with the updated data
Where in the component code would a list of React components typically be built?
in the render method of the parent component
What Array method is commonly used to create a list of React components?
map
Why do components in a list need to have unique keys?
because it uses these keys to identify individual components and track their state and updates
What is the best value to use as a “key” prop when rendering lists?
a unique identifier for each item in the list, like id
What are two ways React components can interact?
one way is through props, another is through callbacks
How can multiple React components share state?
by lift state up
What are the steps to “lift state up”?
move the state to the parent or closest common ancestor and then update the child to have the state passed as props with event handlers
When would you want to lift state up?
when multiple components need access to the same state
When is a component “mounted” to the DOM?
when it appears on the screen for the first time (rendering)
What is a React Effect?
a function that runs after the component has been rendered, it is used to fetch data(API), update the page, or setting up event listeners
When should you use an Effect and when should you not use an Effect?
it should be used when managing side effects like fetching data, updating the page, or setting up event listeners and you shouldn’t use it when you don’t need to manage any of these side effects
When do Effects run?
after the component is rendered
What function is used to declare an Effect?
the useEffect(), first argument is a callback, and the second argument is an array of dependencies
What are Effect dependencies and how do you declare them?
Effect dependencies are used to control when an effect should be run in a React functional component
Why would you want to clean up from an Effect?
to avoid unwanted and unexpected behavior that can occur when you have a state that are no longer needed
How do you clean up from an Effect?
When does the cleanup function run?
when the component is unmounted from the DOM
How can useEffect be used to load data for a component?
giving the data useState an empty array
What browser function can be used to make HTTP requests to a server in React?
fetch()
How do you use useEffect to load component data just once when the component mounts?
pass an empty array
How do you use useEffect to load component data every time the data key changes?
by passing the data key as a dependency
In a large-scale production app, what are some better alternatives for loading and managing backend data?
you can use reactQuery and Vercel SWR
What is the purpose of React “context”?
so that you can pass information from the parent component to multiple children once
What values can be stored in context?
data
How do you create context and make it available to the components?
const MyContext = createContext()
How do you access the context values?
function Component() {
const myValue = useContext(MyContext);
…
}
When would you use context? (in addition to the best answer: “rarely”)
when data needs to be shared between components at different levels of the component tree
What is a React custom hook?
custom function that starts with ‘use’ prefix that allows you to reuse stateful logic between different components
When are custom hooks useful? When are they not required?
when we need a reusable hook for multiple components
What is the syntax (or naming convention) for writing a custom hook?
‘use’ prefix
How do you call a custom hook?
if the custom hook is ‘useTodo’ than you call it like this:
useTodo();
When do custom hooks execute?
its executed on every render of the component where they are called
