Add new articles explaining key React/Next.js concepts

- Introduced article on the difference between server and client components in React/Next.js. - Added explanation of `ReactDOM.render`, `createRoot`, and `hydrateRoot` methods. - Explained the `useFormState` hook and its usage in forms. - Described the `use` function in React for handling asynchronous resources. - Discussed the `useOptimistic` hook for optimistic UI updates. - Clarified what Server Actions are and how to use them with forms in React.

Author: midudev

public/como-funciona-el-hook-use-form-status-y-que-aporta-junto-a-las-server-actions.json

@@ -0,0 +1 @@
+{"id":"como-funciona-el-hook-use-form-status-y-que-aporta-junto-a-las-server-actions","level":1,"title":"¿Cómo funciona el hook `useFormStatus` y qué aporta junto a las Server Actions?","content":"<p><code>useFormStatus</code> (desde <code>react-dom</code>) expone el estado de envío del formulario que lo contiene: <code>pending</code>, <code>action</code>, <code>method</code> y el <code>formData</code> más reciente. Es ideal para deshabilitar botones o mostrar feedback sin levantar estados en el componente padre.</p>\n<pre><code class=\"language-jsx\"><span class=\"token string\">'use client'</span>\n\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> useFormStatus <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react-dom'</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">SubmitButton</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> pending <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> <span class=\"token function\">useFormStatus</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">disabled</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>pending<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>pending <span class=\"token operator\">?</span> <span class=\"token string\">'Guardando…'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'Guardar'</span><span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">></span></span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">function</span> <span class=\"token function\">ProfileForm</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> updateProfile <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>form</span> <span class=\"token attr-name\">action</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>updateProfile<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">'</span>name<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">SubmitButton</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>form</span><span class=\"token punctuation\">></span></span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre>\n\n<p>Cada botón o indicador dentro del formulario accede al mismo estado sin necesidad de prop drilling.</p>\n<hr>\n"}

public/como-funciona-react-memo-y-cuando-es-util.json

@@ -0,0 +1 @@
+{"id":"como-funciona-react-memo-y-cuando-es-util","level":1,"title":"¿Cómo funciona `React.memo` y cuándo es útil?","content":"<p><code>React.memo</code> memoriza el resultado de un componente funcional y solo lo vuelve a renderizar si sus props cambian tras una comparación superficial. Es útil para componentes que renderizan listas grandes o cálculos pesados con props estables.</p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">const</span> PriceTag <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">memo</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span> <span class=\"token function\">PriceTag</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> value<span class=\"token punctuation\">,</span> currency <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">.</span><span class=\"token function\">toLocaleString</span><span class=\"token punctuation\">(</span><span class=\"token string\">'es-ES'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">style</span><span class=\"token operator\">:</span> <span class=\"token string\">'currency'</span><span class=\"token punctuation\">,</span> currency <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">></span></span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">function</span> <span class=\"token function\">Cart</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> items <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token punctuation\">{</span>items<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span> <span class=\"token attr-name\">key</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>item<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token punctuation\">{</span>item<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">}</span><span class=\"token plain-text\"> </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">PriceTag</span></span> <span class=\"token attr-name\">value</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>item<span class=\"token punctuation\">.</span>price<span class=\"token punctuation\">}</span></span> <span class=\"token attr-name\">currency</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">'</span>EUR<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre>\n\n<p>Combínalo con <code>useCallback</code> o <code>useMemo</code> para mantener estables las props de tipo función u objeto y evitar renders innecesarios.</p>\n<hr>\n"}