React Flashcards
How does React work and what is the Virtual DOM vs shadow DOM?
- Virtual DOM is about collecting changes and applying at once ensuring not every change causes a rerender. Changes to the DOM are expensive.
- React keeps original and one with changes, React then diffs the objects to determine the changes to apply to the actual DOM tree
Shadow DOM about encapsulation of smaller components CSS and DOM. e.g or
What is State Management and how can it be used in React?
Local - Within a component React offers hooks to allow a component to store and track state. The useState hook allows you to define a type and then exposes a function to set the state and also exposes the value. Hooks are essentially functions that “hook into” React state and lifecycle features.
Global -
Context API - useContext is a hook designed to share trivial state throughout the component tree. Generally this can help with prop drilling. It has two concepts, provider and consumer. Provider wraps components and is accessible in nested children
Redux - Provides a consistent and central state management within an application. It contains Actions, Reducers and Store.
Actions - events that send data to the redux store. Each action has a type and payload. Dispatching the action will trigger the reducer.
Reducer - Switch case matching on the type. Spread state from store and apply payload or change stateThe reducer is a function that takes the current state and based on the action returns a new state. This all happens within the store. Single application store
Context - Settings, Auth
Redux - Logic to update state, frequent changes
Blazor State -
Cascading parameter
Fluxor
Blazor-State
Singleton service and inject the state in. Declare Action OnChnage and Invoke when changing the value. In the consuming component on initialisation subscribe to the on change event and registers a StateHasChanged handler which tiggers the rerender
public void Dispose()
{
ProfileService.OnChange -= StateHasChanged;
}
public event Action OnChange;
public Profile Profile { get; private set; }
public async Task Set(Profile profile)
{
Profile = profile;
OnChange?.Invoke();;
}
What are the life cycles of UI framework. i.e react
componentDidMount - invoked after component is mounted
componentWillUnmount - component removed from the DOM
componentDidUpdate - called immediately after an update has occurred
What is Flexbox?
Allows you to define a flexible and adaptable layout for a web application. Flex container is the overall container outlined with display: flex. Default flex direction then is vertical or horizontal. Depending on direction you then have the name axis which is uses the justify content and align items on the cross access.
What are media queries?
Media queries are useful in css in order to control styling depending on media or expression such as viewport etc. Generally I have defined media queries on tablet and desktop defining the min width . or max width on the viewport and potential the orientation. I have operated in a mobile first context which then allows for greater UI control of the CSS.
What is RTL and how do you test with RTL
React Testing Library is a lightweight testing framework to support DOM assertions. Render a component then access, exposed object such as screen. You then get DOM elements by querying using but role i.e button with certain text performing user actions such as click etc then waiting on a particular update to occur and making an assertion. It focuses on testing like a user and has the benefit of using a lightweight in memory browser.
When used in conjunction with MSW for mocks requests you focus on the highlevel abstraction that the user uses and not on the implementation detail.
Blazor uses bunit to render a component, perform and action and assert. It has limited scope for jsinterop etc so requires E2E tests using playwright etc
TS vs JS
TS is an OOP language whilst JS is a scripting language Static typing Option param Superset of JS and compiles down to JS Null checking Static typing Interface
TS compile time longer
