React Flashcards
What is the difference between React class components and functional components with hooks? If you were building a project, which one would you choose?
If the project didn’t hold a lot of complicated state, functional components are easier to think and reason about. more control then class components. The lifecycle events have corresponding react hooks. If using redux, I’d use class components.
What is the virtualDOM
Maintaining the representation of the UI in the code, then using the programming library to sync with the real DOM, react uses ReactDOM. Creating the UI and maintaining that state, for ex. I want a button to be green, holding that state in the code. ReactDOM will optimize this process by syncing that with the real DOM.
One click calls 4 functions to setState(), will React go one by one and re-render or trigger all of the calls and just re-render once?
React will update in batch, updates all states into just 1 re-render
Which tools for global state management?
Redux - state management library where you create a state tree. Let’s say there’s a store object that maintains the entire state of the UI in that tree. If anything changes, I fire an event saying this changed, then there are reducers that make the necessary changes. Maintaining the entire state of an application in one object. Works well with React because it can use that state tree and render the UI.
Best practices in React?
Modularization, single responsibility principle with components, linter, using ES6 syntax, functional components over class
Code splitting?
Instead of loading entire application, only load what’s needed at startup and load others later when used, so webpack can manage it, faster loading, speed/performance/scalability
What is new in React 18
concurrency, automatic batching, transitions, suspense on the server, useTransition, useDeferredValue, some hooks and APIs, createRoot, hydrateRoot
How to upgrade React 17 app to React 18
first is to change the index.js file, previously there was reactDOM.render(), now it’s reactDOM.createRoot() then root.render()
What is automatic batching?
Before React 18 there was some batching, but it didn’t batch something like setState(), automatic batching runs now in operations like event handlers and promises automatically.
What are transitions and how are they diff from bouncing or setTimeOut()?
takes a very heavy operation and reserves it to a lower priority queue so it doesn’t freeze the screen. For ex., if an operation takes too long to execute, previously react would freeze the screen until the operation was complete, now, with transitions it executes when it’s ready, part by part. Diff from setTimeOut() because you cannot set a time on transitions and it’s not executed all at once
What is suspense on the server?
It’s like server-side rendering. Content is loaded on the server and then sent to the client. All components don’t need to be rendered at the same time
