Frontend Flashcards
How React js works?
RECONCILIATION AND THE DIFFING ALGORITHM
- Reconciliation: Creates a tree of elements (the virtual DOM). This is actually an object with properties, that it has the root of the tree, and in the props are the leaves (as children). When some element change, it compares the old tree with the new one, identify what it has to change, and make the change in the real DOM.
It makes this with an algorithm called Diffing algorithm. This alg is super efficient to compare the two trees.
The key prop is super important, so in the list, React knows which elements change. If I don’t have the key prop (or I have the key with index), if I insert an element in the beginning of the tree, reacts interpret that all the list has changed. Instead, if I have the unique Keys (without the index as the key), React can understand that there is just one new element added at the beginning of the tree.
RENDERING
- Most of the implementations lives in the Renderers (React DOM, React Native)
- They begin the reconciliation process. They generate the tree of elements and insert it whenever it has to insert it.
- You can create your own renderer with the package react-test-renderer
REACT COMMUNICATES WITH THE RENDERER
- For example, with setState function.
https://www.youtube.com/watch?v=7YhdqIR2Yzo&ab_channel=PhilipFabianek
Keys and React Memo
The keys are used by React to identify elements in a list, to avoid the re-creation of the list elements (not the re-rendering). By default, if the developer does not set anything, it will use the index of the array.
RE-CREATION OF AN ELEMENT
So, let’s imagine if the key change randomly…..
since all “key” attributes will be new, all items “before” will be considered as “removed”, every Item will be considered as “new”, and React will unmount all items and mount them back again (an expensive operation).
REACT MEMO
React Memo is used to avoid re-renders.
PROBLEM WITH INDEX AS KEYS
If the keys are always the index, and you add an element at the beginning of the list, react will understand that now the element with the index 0 has changed, and the props now are different (let’s assume that every element in the list has different props), so it will re-render that element, even if you are using it with React Memo.
SCENARIO WHEN INDEX AS KEY IS A GOOD IDEA
A typical scenario: paginated list. You have a limited number of items in a list, you click on a button - and you want to show different items of the same type in the same size list. If you go with key=”id” approach, then every time you change the page you’ll load completely new set of items with completely different ids. Which means React won’t be able to find any “existing” items, unmount the entire list, and mount completely fresh set of items. But! If you go with key=”index” approach, React will think that all the items on the new “page” already existed, and will just update those items with the fresh data, leaving the actual components mounted. This is going to be visibly faster even on relatively small data sets, if item components are complicated.
TAKEAWAYS
A few key takeaways to leave with:
- never use random value in the “key” attribute: it will cause the item to re-mount on every render. - Unless of course, this is your intention
- there is no harm in using the array’s index as “key” in “static” lists, those whose items number and order stay the same
- use item unique identifier (“id”) as “key” when the list can be re-sorted or items can be added in random places
- you can use the array’s index as “key” for dynamic lists with stateless items, where items are replaced with the new ones - paginated lists, search and autocomplete results and the like. This will improve the list’s performance.
What are the new things in react 18
- Concurrent mode moving forwards: React is going to be able to stop an ongoing render (now if the render start, it has to finish). It is working with this with frameworks such as NExt js.
- You can start using some concurrent mode features. A TRANSITION is a new concept in React to distinguish between urgent and non-urgent updates.
— URGENT UPDATES reflect direct interaction, like typing, clicking, pressing, and so on.
— TRANSITION UPDATES: transition the UI from one view to another.
With useTransition and startTransition we can tell React the updates that are transitions (secondaries).
https://reactjs.org/blog/2022/03/29/react-v18.html#gradually-adopting-concurrent-features
Name some accessibility techniques
- aria label: to add a description to elements (as inputs, buttons) for screen readers in websites. If the element has the text content, you DON’T need to add aria-label, as it is redundant.
- accessible forms: use htmlFor in label
<label>Name:</label>
<input></input> - Notify errors (Error situations need to be understood by all users, screen readers as well).
- HTML semantic: do not use divs all the time, use main, article, nav, footer, etc elements..
- focus control: Ensure that your web application can be fully operated with the keyboard only
Name HTML structures that are better than just divs
main: indicates to browsers and screen readers which portion of your markup contains the main section of content on a given page. This can help with keyboard command access, zooming on mobile browsers, and more. It should be used only once per page.
sections: The section element is used to group content by theme and represents a section of a document or application. Sections can have their own header and footer elements, and there can be multiple section elements used on a single page.
It is basically a wrapper for h1 (or other h tags) and the content that corresponds to this.
aside: typically sidebars
article: An article is essentially a document within your document that is repeated or paginated… for example, each blog post on your document can be an article, or each comment on your document can be an article.
blockquote: it is an element that represents content that is being quoted from an external source (a person, document, newspaper, case study, etc.).
nav: As the name implies, nav elements represent the navigation section of a document.
footer: The footer element represents the “footer” section of a document or section.
When to use useCallback or useMemo?
- Referential equality
- Computationally expensive calculations
https://kentcdodds.com/blog/usememo-and-usecallback
Cuales son las ventajas de Next js?
Rendimiento: Next.js utiliza representación en el lado del servidor (SSR) y generación estática (SSG) para optimizar el rendimiento de tus aplicaciones web. Esto puede resultar en tiempos de carga más rápidos, lo que contribuye a una mejor experiencia del usuario y reduce la exposición a ataques basados en la sobrecarga del lado del cliente.
Enrutamiento integrado: Next.js ofrece un sistema de enrutamiento integrado que facilita la gestión de rutas en tu aplicación. Un enrutamiento bien definido puede ayudar a evitar errores de seguridad relacionados con la navegación no autorizada.
Seguridad contra XSS: Next.js incluye protección contra ataques de Cross-Site Scripting (XSS) de forma predeterminada. Escapa automáticamente los datos dinámicos para evitar la inserción de scripts maliciosos en tu aplicación.
Protección contra inyección de código: El enfoque en el rendimiento de Next.js fomenta la separación de datos y presentación, lo que puede reducir el riesgo de inyección de código, como SQL injection, ya que se tiende a evitar la interpolación directa de datos en consultas.
Carga de módulos bajo demanda: Next.js implementa la división automática de código, lo que significa que solo se carga el código necesario para la página actual, reduciendo la superficie de ataque al eliminar código innecesario.
Encabezados de seguridad: Puedes configurar fácilmente encabezados de seguridad, como Content Security Policy (CSP) y HTTP Strict Transport Security (HSTS), para proteger tu aplicación contra vulnerabilidades comunes.
s: Next.js permite crear rutas de API de manera sencilla, lo que facilita la construcci ra prevenir abusos.
porciona actualizaciones para corregir problemas de seguridad.
plicación Next.js utilizando bibliotecas y estrategias de autenticación bien probadas.
Soporte a largo plazo: Next.js tiene una historia de soporte a largo plazo (LTS), lo que significa que puedes mantener tu aplicación actualizada y segura con facilidad.
¿Cómo abordaría problemas de compatibilidad entre navegadores al escribir CSS?
Considera el uso de polyfills: Si necesitas características que no son compatibles con navegadores antiguos, considera el uso de polyfills, que son scripts JavaScript que agregan funcionalidad faltante a los navegadores que no la admiten nativamente.
Utiliza prefijos de proveedores: Al usar características de CSS3 que aún no son completamente estándarizadas, es posible que necesites agregar prefijos de proveedores para asegurarte de que funcionen en diferentes navegadores. Por ejemplo, -webkit- para WebKit (Chrome y Safari), -moz- para Mozilla (Firefox), -ms- para Microsoft (Edge e Internet Explorer), y -o- para Opera. Sin embargo, ten en cuenta que muchos de estos prefijos de proveedores son obsoletos en navegadores modernos.
Utiliza herramientas de autoprefijado: Herramientas como Autoprefixer pueden generar automáticamente los prefijos de proveedores necesarios para tu código CSS, lo que simplifica el proceso de garantizar la compatibilidad entre navegadores.
Utiliza “reset” o “normalize” CSS: Comienza tu hoja de estilos con un “reset” o “normalize” CSS para establecer un conjunto consistente de estilos base en todos los navegadores. Esto ayuda a reducir las diferencias iniciales en la interpretación de CSS entre los navegadores.
Como hacer mas performante al CSS?
Utiliza CSS minificado:
Elimina CSS no utilizado (podes usar PurgeCSS)
Carga asíncrona de CSS:
Utiliza la propiedad rel=”preload” para cargar CSS de forma asíncrona, reduciendo el tiempo de bloqueo de renderizado crítico.
Aprovecha la compresión GZIP o Brotli
Habilita la compresión de CSS en tu servidor web para reducir el tamaño de transferencia de los archivos CSS.
Utiliza una CDN:
Utiliza una Content Delivery Network (CDN) para servir archivos CSS, lo que puede mejorar la velocidad de entrega.
CSS crítico y diferido:
Carga primero el CSS crítico para mostrar contenido principal rápidamente. Luego, carga CSS no crítico de manera diferida.
Position relative vs Position absolute
(se puede usar top, bottom, right, left para mover a ambos)
Position relative: El elemento se mueve con respecto a la posicion donde estaria
Position Absolute: el elemento se movera con respecto al primer elemento padre que tenga una propiedad position distinta de static. Si no hay ningun elemento, se movera en relacion con el documento HTML
explica flex-grow, flex-shrink and flex-basis
flex-grow:
- Esta propiedad define la capacidad de crecimiento de un elemento flexible en relación con otros elementos flexibles en el mismo contenedor.
- Toma un valor numérico, que es un factor de crecimiento relativo. Si todos los elementos flexibles tienen flex-grow establecido en 1, se distribuirá el espacio disponible de manera uniforme entre ellos. Si un elemento tiene un valor de flex-grow mayor que los demás, obtendrá una parte proporcionalmente mayor del espacio disponible.
- Si el valor es 0, el elemento no crecerá y no compartirá ningún espacio adicional.
flex-shrink:
- define la capacidad de un elemento de reducirse en relacion a otros elementos.
- Si el valor es 0, el elemento no se reducirá en absoluto, lo que significa que conservará su tamaño original..
flex-basis:
- La propiedad flex-basis establece el tamaño base de un elemento flexible antes de considerar el espacio adicional que podría ganar o perder debido a flex-grow o flex-shrink.
- Puedes establecer flex-basis en un valor fijo, como píxeles o porcentajes, o en la palabra clave auto para que el tamaño base se determine automáticamente por el contenido del elemento.
- es especialmente útil cuando deseas controlar el tamaño inicial de los elementos flexibles antes de que se aplique el crecimiento o el encogimiento.
Menciona algunas cosas de Grid Layout
debes definir las filas y columnas de tu cuadrícula. Puedes hacerlo utilizando propiedades como grid-template-rows y grid-template-columns.
css
Copy code
.contenedor-de-grid {
display: grid;
grid-template-rows: 100px 200px; /* Dos filas con alturas
fijas /
grid-template-columns: 1fr 2fr; / Dos columnas, la
segunda es el doble de ancha que la primera */
}
Coloca elementos dentro de la cuadrícula utilizando propiedades como grid-row y grid-column. También puedes utilizar la propiedad grid-area para definir un nombre para un área específica en la cuadrícula y luego asignar elementos a ese nombre.
css
Copy code
.elemento {
grid-row: 1 / 3; /* El elemento ocupará de la fila 1 a la fila
3 /
grid-column: 2 / 3; / El elemento ocupará de la columna
2 a la columna 3 */
}
GAP
.contenedor-de-grid {
grid-row-gap: 10px;
grid-column-gap: 20px;
}
Explain useLayoutEffect of react
useLayoutEffect is a React Hook that is used for performing side effects in a way that is synchronized with the browser’s layout repaint. It’s very similar to useEffect, but it runs synchronously immediately after the DOM has been modified and before the browser has had a chance to paint those changes. This can be useful in certain situations where you need to ensure that the effect runs before the browser repaints the screen.
