@unsetsoft/ryunixjs 1.2.2 → 1.2.3-canary.1

package/dist/Ryunix.js

@@ -1,105 +1,115 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}, global.lodash));
-})(this, (function (exports, lodash) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
+})(this, (function (exports) { 'use strict';
 
-  let vars = {
+  // Improved state management - avoid global mutable object
+  // Instead, create a state manager that can be instantiated per render tree
+
+  const createRenderState = () => ({
     containerRoot: null,
     nextUnitOfWork: null,
     currentRoot: null,
     wipRoot: null,
-    deletions: null,
+    deletions: [],
     wipFiber: null,
-    hookIndex: null,
-    effects: null,
-  };
+    hookIndex: 0,
+    effects: [],
+  });
+
+  // Singleton for backward compatibility, but allows testing with isolated instances
+  let globalState = createRenderState();
 
-  const reg = /[A-Z]/g;
+  const getState = () => globalState;
+
+  // Use const for regex to prevent accidental modification
+  const CAMEL_TO_KEBAB_REGEX = /[A-Z]/g;
 
   const RYUNIX_TYPES = Object.freeze({
-    TEXT_ELEMENT: Symbol('text.element').toString(),
-    Ryunix_ELEMENT: Symbol('ryunix.element').toString(),
-    RYUNIX_EFFECT: Symbol('ryunix.effect').toString(),
-    RYUNIX_MEMO: Symbol('ryunix.memo').toString(),
-    RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery').toString(),
-    RYUNIX_REF: Symbol('ryunix.ref').toString(),
-    RYUNIX_STORE: Symbol('ryunix.store').toString(),
-    RYUNIX_REDUCE: Symbol('ryunix.reduce').toString(),
-    RYUNIX_FRAGMENT: Symbol('ryunix.fragment').toString(),
-    RYUNIX_CONTEXT: Symbol('ryunix.context').toString(),
+    TEXT_ELEMENT: Symbol.for('ryunix.text.element'),
+    RYUNIX_ELEMENT: Symbol.for('ryunix.element'),
+    RYUNIX_EFFECT: Symbol.for('ryunix.effect'),
+    RYUNIX_MEMO: Symbol.for('ryunix.memo'),
+    RYUNIX_URL_QUERY: Symbol.for('ryunix.urlQuery'),
+    RYUNIX_REF: Symbol.for('ryunix.ref'),
+    RYUNIX_STORE: Symbol.for('ryunix.store'),
+    RYUNIX_REDUCE: Symbol.for('ryunix.reduce'),
+    RYUNIX_FRAGMENT: Symbol.for('ryunix.fragment'),
+    RYUNIX_CONTEXT: Symbol.for('ryunix.context'),
   });
 
   const STRINGS = Object.freeze({
-    object: 'object',
-    function: 'function',
-    style: 'ryunix-style',
-    className: 'ryunix-class',
-    children: 'children',
-    boolean: 'boolean',
-    string: 'string',
+    OBJECT: 'object',
+    FUNCTION: 'function',
+    STYLE: 'ryunix-style',
+    CLASS_NAME: 'ryunix-class',
+    CHILDREN: 'children',
+    BOOLEAN: 'boolean',
+    STRING: 'string',
+    UNDEFINED: 'undefined',
   });
 
   const OLD_STRINGS = Object.freeze({
-    style: 'style',
-    className: 'className',
+    STYLE: 'style',
+    CLASS_NAME: 'className',
   });
 
   const EFFECT_TAGS = Object.freeze({
-    PLACEMENT: Symbol('ryunix.reconciler.status.placement').toString(),
-    UPDATE: Symbol('ryunix.reconciler.status.update').toString(),
-    DELETION: Symbol('ryunix.reconciler.status.deletion').toString(),
-    NO_EFFECT: Symbol('ryunix.reconciler.status.no_efect').toString(),
+    PLACEMENT: Symbol.for('ryunix.reconciler.status.placement'),
+    UPDATE: Symbol.for('ryunix.reconciler.status.update'),
+    DELETION: Symbol.for('ryunix.reconciler.status.deletion'),
+    NO_EFFECT: Symbol.for('ryunix.reconciler.status.no_effect'),
   });
 
   /**
-   * The function creates a new element with the given type, props, and children.
-   * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
-   * @param props - The `props` parameter is an object that contains the properties or attributes of the
-   * element being created. These properties can include things like `className`, `id`, `style`, and any
-   * other custom attributes that the user wants to add to the element. The `props` object is spread
-   * using the spread
-   * @param children - The `children` parameter is a rest parameter that allows the function to accept
-   * any number of arguments after the `props` parameter. These arguments will be treated as children
-   * elements of the created element. The `map` function is used to iterate over each child and create a
-   * new element if it is not
-   * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
-   * set to the `type` argument passed into the function, and the `props` property is an object that
-   * includes any additional properties passed in the `props` argument, as well as a `children` property
-   * that is an array of any child elements passed in the `...children` argument
+   * Type checking utilities
    */
+  const is = {
+    object: (val) => val !== null && typeof val === STRINGS.OBJECT,
+    function: (val) => typeof val === STRINGS.FUNCTION,
+    string: (val) => typeof val === STRINGS.STRING,
+    undefined: (val) => typeof val === STRINGS.UNDEFINED,
+    null: (val) => val === null,
+    array: (val) => Array.isArray(val),
+    promise: (val) => val instanceof Promise,
+  };
 
-  const createElement = (type, props, ...children) => {
+  /**
+   * Create text element
+   */
+  const createTextElement = (text) => {
     return {
-      type,
+      type: RYUNIX_TYPES.TEXT_ELEMENT,
       props: {
-        ...props,
-        children: children
-          .flat()
-          .map((child) =>
-            typeof child === STRINGS.object ? child : createTextElement(child),
-          ),
+        nodeValue: text,
+        children: [],
       },
     }
   };
 
   /**
-   * The function creates a text element with a given text value.
-   * @param text - The text content that will be used to create a new text element.
-   * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
-   * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
+   * Create element
    */
+  const createElement = (type, props, ...children) => {
+    const safeProps = props || {};
 
-  const createTextElement = (text) => {
     return {
-      type: RYUNIX_TYPES.TEXT_ELEMENT,
+      type,
       props: {
-        nodeValue: text,
-        children: [],
+        ...safeProps,
+        children: children
+          .flat()
+          .map((child) =>
+            typeof child === STRINGS.OBJECT ? child : createTextElement(child),
+          ),
       },
     }
   };
 
+  /**
+   * Fragment component
+   */
   const Fragment = (props) => {
     const children = Array.isArray(props.children)
       ? props.children
@@ -107,214 +117,353 @@
     return createElement(RYUNIX_TYPES.RYUNIX_FRAGMENT, {}, ...children)
   };
 
+  /**
+   * Check if a key is an event handler
+   * @param {string} key - Prop key
+   * @returns {boolean}
+   */
   const isEvent = (key) => key.startsWith('on');
-  const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
-  const isNew = (prev, next) => (key) => prev[key] !== next[key];
+
+  /**
+   * Check if a key is a property (not children or event)
+   * @param {string} key - Prop key
+   * @returns {boolean}
+   */
+  const isProperty = (key) => key !== STRINGS.CHILDREN && !isEvent(key);
+
+  /**
+   * Check if a property is new or changed
+   * @param {Object} prev - Previous props
+   * @param {Object} next - Next props
+   * @returns {Function}
+   */
+  const isNew = (prev, next) => (key) => {
+    // Use Object.is for better comparison (handles NaN, -0, +0)
+    return !Object.is(prev[key], next[key])
+  };
+
+  /**
+   * Check if a property was removed
+   * @param {Object} next - Next props
+   * @returns {Function}
+   */
   const isGone = (next) => (key) => !(key in next);
-  const hasDepsChanged = (prevDeps, nextDeps) =>
-    !prevDeps ||
-    !nextDeps ||
-    prevDeps.length !== nextDeps.length ||
-    prevDeps.some((dep, index) => dep !== nextDeps[index]);
 
   /**
-   * The function cancels all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
-   * represent a component and its state. It contains information about the component's props, state, and
-   * children, as well as metadata used by React to manage updates and rendering. The function
-   * "cancelEffects" is likely intended
+   * Cancel effects for a single fiber
+   * @param {Object} fiber - Fiber node
    */
   const cancelEffects = (fiber) => {
-    if (fiber.hooks && fiber.hooks.length > 0) {
-      fiber.hooks
-        .filter((hook) => hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
-        .forEach((effectHook) => {
-          effectHook.cancel();
-        });
-    }
+    if (!fiber?.hooks?.length) return
+
+    fiber.hooks
+      .filter(
+        (hook) =>
+          hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.cancel),
+      )
+      .forEach((hook) => {
+        try {
+          hook.cancel();
+          hook.cancel = null; // Clear reference to prevent memory leaks
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Error in effect cleanup:', error);
+          }
+        }
+      });
   };
 
   /**
-   * The function `cancelEffectsDeep` recursively cancels effects in a fiber tree by running cleanup
-   * functions for each effect hook.
-   * @param fiber - The `fiber` parameter in the `cancelEffectsDeep` function seems to be an object
-   * representing a fiber node in a data structure. The function recursively traverses the fiber tree to
-   * find hooks with effects and cancels them by calling their `cancel` function if it exists. It also
-   * logs a message
-   * @returns The `cancelEffectsDeep` function does not explicitly return a value. It is a recursive
-   * function that traverses a fiber tree structure and cancels effects for hooks that have a `cancel`
-   * function defined. The function performs cleanup operations by calling the `cancel` function for each
-   * applicable hook.
+   * Recursively cancel effects in fiber tree
+   * @param {Object} fiber - Root fiber node
    */
   const cancelEffectsDeep = (fiber) => {
     if (!fiber) return
 
-    if (fiber.hooks && fiber.hooks.length > 0) {
+    // Cancel effects for current fiber
+    if (fiber.hooks?.length > 0) {
       fiber.hooks
         .filter(
           (hook) =>
-            hook.type === RYUNIX_TYPES.RYUNIX_EFFECT &&
-            typeof hook.cancel === STRINGS.function,
+            hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.cancel),
         )
         .forEach((hook) => {
-          hook.cancel();
+          try {
+            hook.cancel();
+            hook.cancel = null; // Clear reference
+          } catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+              console.error('Error in deep effect cleanup:', error);
+            }
+          }
         });
     }
 
+    // Recursively process children
     if (fiber.child) cancelEffectsDeep(fiber.child);
     if (fiber.sibling) cancelEffectsDeep(fiber.sibling);
   };
 
   /**
-   * The function runs all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
-   * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
-   * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
-   * contains information about a component and its children, as
+   * Run effects for a fiber
+   * @param {Object} fiber - Fiber node
    */
   const runEffects = (fiber) => {
-    if (!fiber.hooks || fiber.hooks.length === 0) return
+    if (!fiber?.hooks?.length) return
 
     for (let i = 0; i < fiber.hooks.length; i++) {
       const hook = fiber.hooks[i];
-      if (
-        hook.type === RYUNIX_TYPES.RYUNIX_EFFECT &&
-        typeof hook.effect === STRINGS.function &&
-        hook.effect !== null
-      ) {
-        if (typeof hook.cancel === STRINGS.function) {
-          hook.cancel();
+
+      if (hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.effect)) {
+        // Cancel previous cleanup if exists
+        if (is.function(hook.cancel)) {
+          try {
+            hook.cancel();
+          } catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+              console.error('Error in effect cleanup:', error);
+            }
+          }
         }
 
-        const cleanup = hook.effect();
+        // Run new effect
+        try {
+          const cleanup = hook.effect();
 
-        if (typeof cleanup === 'function') {
-          hook.cancel = cleanup;
-        } else {
-          hook.cancel = undefined;
+          // Store cleanup function if returned
+          if (is.function(cleanup)) {
+            hook.cancel = cleanup;
+          } else {
+            hook.cancel = null;
+          }
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Error in effect:', error);
+          }
+          hook.cancel = null;
         }
+
+        // Clear effect reference after running
+        hook.effect = null;
+      }
+    }
+  };
+
+  /**
+   * Convert camelCase to kebab-case for CSS properties
+   * @param {string} camelCase - CamelCase string
+   * @returns {string} Kebab-case string
+   */
+  const camelToKebab = (camelCase) => {
+    return camelCase.replace(
+      CAMEL_TO_KEBAB_REGEX,
+      (match) => `-${match.toLowerCase()}`,
+    )
+  };
+
+  /**
+   * Apply styles to DOM element
+   * @param {HTMLElement} dom - DOM element
+   * @param {Object} styleObj - Style object
+   */
+  const applyStyles = (dom, styleObj) => {
+    if (!is.object(styleObj) || is.null(styleObj)) {
+      dom.style.cssText = '';
+      return
+    }
+
+    try {
+      const cssText = Object.entries(styleObj)
+        .filter(([_, value]) => value != null) // Filter out null/undefined
+        .map(([key, value]) => {
+          const kebabKey = camelToKebab(key);
+          return `${kebabKey}: ${value}`
+        })
+        .join('; ');
+
+      dom.style.cssText = cssText;
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('Error applying styles:', error);
+      }
+    }
+  };
+
+  /**
+   * Apply CSS classes to DOM element
+   * @param {HTMLElement} dom - DOM element
+   * @param {string} prevClasses - Previous class string
+   * @param {string} nextClasses - Next class string
+   */
+  const applyClasses = (dom, prevClasses, nextClasses) => {
+    // Allow empty/undefined - just remove classes
+    if (!nextClasses || nextClasses.trim() === '') {
+      if (prevClasses) {
+        const oldClasses = prevClasses.split(/\s+/).filter(Boolean);
+        dom.classList.remove(...oldClasses);
       }
+      return
+    }
+
+    // Remove old classes
+    if (prevClasses) {
+      const oldClasses = prevClasses.split(/\s+/).filter(Boolean);
+      dom.classList.remove(...oldClasses);
+    }
+
+    // Add new classes
+    const newClasses = nextClasses.split(/\s+/).filter(Boolean);
+    if (newClasses.length > 0) {
+      dom.classList.add(...newClasses);
     }
   };
 
   /**
-   * The function creates a new DOM element based on the given fiber object and updates its properties.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the element type, props, and children of the node.
-   * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
-   * passed as an argument. If the `fiber` object represents a text element, a text node is created using
-   * `document.createTextNode("")`. Otherwise, a new element is created using
-   * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
-   * properties of the newly created
+   * Create a DOM element from fiber
+   * @param {Object} fiber - Fiber node
+   * @returns {HTMLElement|Text|null}
    */
   const createDom = (fiber) => {
+    // Fragments don't create real DOM nodes
     if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
-      return null // Los fragmentos no crean nodos DOM reales
+      return null
     }
-    const dom =
-      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode('')
-        : document.createElement(fiber.type);
 
-    updateDom(dom, {}, fiber.props);
+    let dom;
+
+    try {
+      if (fiber.type === RYUNIX_TYPES.TEXT_ELEMENT) {
+        dom = document.createTextNode('');
+      } else if (is.string(fiber.type)) {
+        dom = document.createElement(fiber.type);
+      } else {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(
+            'Attempted to create DOM for non-host component:',
+            fiber.type,
+          );
+        }
+        return null
+      }
 
-    return dom
+      updateDom(dom, {}, fiber.props);
+      return dom
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('Error creating DOM element:', error, fiber);
+      }
+      return null
+    }
   };
 
   /**
-   * The function updates the DOM by removing old event listeners and properties, and adding new ones
-   * based on the previous and next props.
-   * @param dom - The DOM element that needs to be updated with new props.
-   * @param prevProps - An object representing the previous props (properties) of a DOM element.
-   * @param nextProps - An object containing the new props that need to be updated in the DOM.
+   * Update DOM element with new props
+   * @param {HTMLElement|Text} dom - DOM element
+   * @param {Object} prevProps - Previous props
+   * @param {Object} nextProps - Next props
    */
-  const updateDom = (dom, prevProps, nextProps) => {
+  const updateDom = (dom, prevProps = {}, nextProps = {}) => {
+    // Remove old event listeners
     Object.keys(prevProps)
       .filter(isEvent)
       .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
       .forEach((name) => {
         const eventType = name.toLowerCase().substring(2);
-        dom.removeEventListener(eventType, prevProps[name]);
+        try {
+          dom.removeEventListener(eventType, prevProps[name]);
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn('Error removing event listener:', error);
+          }
+        }
       });
 
+    // Remove old properties
     Object.keys(prevProps)
       .filter(isProperty)
       .filter(isGone(nextProps))
       .forEach((name) => {
+        // Skip special properties
+        if (
+          [
+            STRINGS.STYLE,
+            OLD_STRINGS.STYLE,
+            STRINGS.CLASS_NAME,
+            OLD_STRINGS.CLASS_NAME,
+          ].includes(name)
+        ) {
+          return
+        }
         dom[name] = '';
       });
 
+    // Set new properties
     Object.keys(nextProps)
       .filter(isProperty)
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
-        if (name === STRINGS.style) {
-          DomStyle(dom, nextProps['ryunix-style']);
-        } else if (name === OLD_STRINGS.style) {
-          DomStyle(dom, nextProps.style);
-        } else if (name === STRINGS.className) {
-          if (nextProps['ryunix-class'] === '') {
-            throw new Error('data-class cannot be empty.')
+        try {
+          // Handle style properties
+          if (name === STRINGS.STYLE || name === OLD_STRINGS.STYLE) {
+            const styleValue = nextProps[name];
+            applyStyles(dom, styleValue);
           }
-
-          prevProps['ryunix-class'] &&
-            dom.classList.remove(
-              ...(prevProps['ryunix-class'].split(/\s+/).filter(Boolean) || []),
+          // Handle className properties
+          else if (name === STRINGS.CLASS_NAME) {
+            applyClasses(
+              dom,
+              prevProps[STRINGS.CLASS_NAME],
+              nextProps[STRINGS.CLASS_NAME],
             );
-          dom.classList.add(
-            ...nextProps['ryunix-class'].split(/\s+/).filter(Boolean),
-          );
-        } else if (name === OLD_STRINGS.className) {
-          if (nextProps.className === '') {
-            throw new Error('className cannot be empty.')
-          }
-
-          prevProps.className &&
-            dom.classList.remove(
-              ...(prevProps.className.split(/\s+/).filter(Boolean) || []),
+          } else if (name === OLD_STRINGS.CLASS_NAME) {
+            applyClasses(
+              dom,
+              prevProps[OLD_STRINGS.CLASS_NAME],
+              nextProps[OLD_STRINGS.CLASS_NAME],
             );
-          dom.classList.add(...nextProps.className.split(/\s+/).filter(Boolean));
-        } else {
-          dom[name] = nextProps[name];
+          }
+          // Handle other properties
+          else {
+            // Special handling for value and checked (controlled components)
+            if (name === 'value' || name === 'checked') {
+              if (dom[name] !== nextProps[name]) {
+                dom[name] = nextProps[name];
+              }
+            } else {
+              dom[name] = nextProps[name];
+            }
+          }
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Error setting property ${name}:`, error);
+          }
         }
       });
 
+    // Add new event listeners
     Object.keys(nextProps)
       .filter(isEvent)
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
         const eventType = name.toLowerCase().substring(2);
-        dom.addEventListener(eventType, nextProps[name]);
-      });
-  };
-
-  const DomStyle = (dom, style) => {
-    dom.style = Object.keys(style).reduce((acc, styleName) => {
-      const key = styleName.replace(reg, function (v) {
-        return '-' + v.toLowerCase()
+        try {
+          dom.addEventListener(eventType, nextProps[name]);
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn('Error adding event listener:', error);
+          }
+        }
       });
-      acc += `${key}: ${style[styleName]};`;
-      return acc
-    }, '');
   };
 
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
   const commitRoot = () => {
-    vars.deletions.forEach(commitWork);
-    commitWork(vars.wipRoot.child);
-    vars.currentRoot = vars.wipRoot;
-    vars.wipRoot = null;
+    const state = getState();
+    state.deletions.forEach(commitWork);
+    commitWork(state.wipRoot.child);
+    state.currentRoot = state.wipRoot;
+    state.wipRoot = null;
   };
 
-  /**
-   * The function commits changes made to the DOM based on the effect tag of the fiber.
-   * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
-   * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
-   * parameter to commit the changes made during the reconciliation process to the actual DOM.
-   * @returns The function does not return anything, it performs side effects by manipulating the DOM.
-   */
   const commitWork = (fiber) => {
     if (!fiber) {
       return
@@ -347,13 +496,6 @@
     commitWork(fiber.sibling);
   };
 
-  /**
-   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
-   * its child's DOM node until it finds a node to remove.
-   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
-   * application.
-   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
-   */
   const commitDeletion = (fiber, domParent) => {
     if (fiber.dom) {
       domParent.removeChild(fiber.dom);
@@ -367,37 +509,54 @@
   };
 
   /**
-   * This function reconciles the children of a fiber node with a new set of elements, creating new
-   * fibers for new elements, updating existing fibers for elements with the same type, and marking old
-   * fibers for deletion if they are not present in the new set of elements.
-   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
-   * DOM tree.
-   * @param elements - an array of elements representing the new children to be rendered in the current
-   * fiber's subtree
+   * Reconcile children with key optimization
    */
   const reconcileChildren = (wipFiber, elements) => {
+    const state = getState();
     let index = 0;
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     let prevSibling;
 
-    while (index < elements.length || oldFiber != null) {
+    // Build map of old fibers by key/index
+    const oldFiberMap = new Map();
+    let oldFiber = wipFiber.alternate?.child;
+    let position = 0;
+
+    while (oldFiber) {
+      const key = oldFiber.key ?? `__index_${position}__`;
+      oldFiberMap.set(key, oldFiber);
+      oldFiber = oldFiber.sibling;
+      position++;
+    }
+
+    // Process new elements
+    while (index < elements.length) {
       const element = elements[index];
-      let newFiber;
+      if (!element) {
+        index++;
+        continue
+      }
+
+      const key = element.key ?? `__index_${index}__`;
+      const matchedFiber = oldFiberMap.get(key);
 
-      const sameType = oldFiber && element && element.type == oldFiber.type;
+      let newFiber;
+      const sameType = matchedFiber && element.type === matchedFiber.type;
 
       if (sameType) {
+        // Update existing fiber
         newFiber = {
-          type: oldFiber.type,
+          type: matchedFiber.type,
           props: element.props,
-          dom: oldFiber.dom,
+          dom: matchedFiber.dom,
           parent: wipFiber,
-          alternate: oldFiber,
+          alternate: matchedFiber,
           effectTag: EFFECT_TAGS.UPDATE,
-          hooks: oldFiber.hooks,
+          hooks: matchedFiber.hooks,
+          key: element.key,
         };
-      }
-      if (element && !sameType) {
+        oldFiberMap.delete(key);
+      } else {
+        // Create new fiber
         newFiber = {
           type: element.type,
           props: element.props,
@@ -405,42 +564,43 @@
           parent: wipFiber,
           alternate: null,
           effectTag: EFFECT_TAGS.PLACEMENT,
+          key: element.key,
         };
-      }
-      if (oldFiber && !sameType) {
-        oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        vars.deletions.push(oldFiber);
-      }
 
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling;
+        // Mark matched fiber for deletion if exists
+        if (matchedFiber) {
+          matchedFiber.effectTag = EFFECT_TAGS.DELETION;
+          state.deletions.push(matchedFiber);
+          oldFiberMap.delete(key);
+        }
       }
 
+      // Link fibers
       if (index === 0) {
         wipFiber.child = newFiber;
-      } else if (element) {
+      } else if (newFiber) {
         prevSibling.sibling = newFiber;
       }
 
       prevSibling = newFiber;
       index++;
     }
+
+    // Delete remaining old fibers
+    oldFiberMap.forEach((fiber) => {
+      fiber.effectTag = EFFECT_TAGS.DELETION;
+      state.deletions.push(fiber);
+    });
   };
 
-  /**
-   * This function updates a function component by setting up a work-in-progress fiber, resetting the
-   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the component, its props, state, and children. In this function, it is
-   * used to update the state of the component and its children.
-   */
   const updateFunctionComponent = (fiber) => {
-    vars.wipFiber = fiber;
-    vars.hookIndex = 0;
-    vars.wipFiber.hooks = [];
+    const state = getState();
+    state.wipFiber = fiber;
+    state.hookIndex = 0;
+    state.wipFiber.hooks = [];
+
     const children = [fiber.type(fiber.props)];
 
-    // Aquí detectamos si es Provider para guardar contexto y valor en fiber
     if (fiber.type._contextId && fiber.props.value !== undefined) {
       fiber._contextId = fiber.type._contextId;
       fiber._contextValue = fiber.props.value;
@@ -449,62 +609,186 @@
     reconcileChildren(fiber, children);
   };
 
-  /**
-   * This function updates a host component's DOM element and reconciles its children.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to other
-   * fibers in the tree.
-   */
   const updateHostComponent = (fiber) => {
-    const children = Array.isArray(fiber.props.children)
-      ? fiber.props.children.flat()
-      : [fiber.props.children];
-
-    if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
-      reconcileChildren(fiber, children);
-    } else {
-      if (!fiber.dom) {
-        fiber.dom = createDom(fiber);
-      }
-      reconcileChildren(fiber, children);
+    if (!fiber.dom) {
+      fiber.dom = createDom(fiber);
     }
+    const children = fiber.props?.children || [];
+    reconcileChildren(fiber, children);
+  };
+
+  const Image = ({ src, ...props }) => {
+    return createElement('img', { ...props, src })
   };
 
   /**
-   * The `Image` function in JavaScript optimizes image loading based on a specified optimization flag.
-   * @returns An `<img>` element is being returned with the specified `src` and other props passed to the
-   * `Image` component. The `src` is either the original `src` value or the result of calling
-   * `optimizationImageApi` function with `src` and `props` if `optimization` is set to 'true'.
+   * Priority levels for updates
    */
-  const Image = ({ src, ...props }) => {
-    props.optimization === 'true' ? true : false;
+  const Priority = {
+    IMMEDIATE: 1, // User input (clicks, typing)
+    USER_BLOCKING: 2, // Hover, scroll
+    NORMAL: 3, // Data fetching
+    LOW: 4, // Analytics
+    IDLE: 5, // Background tasks
+  };
 
-    const url = src;
+  Priority.NORMAL;
 
-    const ImageProps = {
-      src: url,
-      ...props,
-    };
+  /**
+   * Performance profiler for Ryunix
+   */
+  class Profiler {
+    constructor() {
+      this.enabled = process.env.NODE_ENV !== 'production';
+      this.measures = new Map();
+      this.renderTimes = [];
+      this.maxSamples = 100;
+    }
+
+    startMeasure(name) {
+      if (!this.enabled) return
+      this.measures.set(name, performance.now());
+    }
+
+    endMeasure(name) {
+      if (!this.enabled) return
+      const start = this.measures.get(name);
+      if (!start) return
+
+      const duration = performance.now() - start;
+      this.measures.delete(name);
+
+      return duration
+    }
+
+    recordRender(componentName, duration) {
+      if (!this.enabled) return
+
+      this.renderTimes.push({
+        component: componentName,
+        duration,
+        timestamp: Date.now(),
+      });
+
+      if (this.renderTimes.length > this.maxSamples) {
+        this.renderTimes.shift();
+      }
+    }
+
+    getStats() {
+      if (!this.enabled) return null
+
+      const total = this.renderTimes.reduce((sum, r) => sum + r.duration, 0);
+      const avg = total / this.renderTimes.length;
+      const max = Math.max(...this.renderTimes.map((r) => r.duration));
+      const min = Math.min(...this.renderTimes.map((r) => r.duration));
+
+      return { total, avg, max, min, count: this.renderTimes.length }
+    }
+
+    getSlowestComponents(limit = 10) {
+      if (!this.enabled) return []
+
+      const byComponent = new Map();
+
+      this.renderTimes.forEach(({ component, duration }) => {
+        if (!byComponent.has(component)) {
+          byComponent.set(component, { total: 0, count: 0, max: 0 });
+        }
+        const stats = byComponent.get(component);
+        stats.total += duration;
+        stats.count++;
+        stats.max = Math.max(stats.max, duration);
+      });
+
+      return Array.from(byComponent.entries())
+        .map(([name, stats]) => ({
+          name,
+          avg: stats.total / stats.count,
+          max: stats.max,
+          count: stats.count,
+        }))
+        .sort((a, b) => b.avg - a.avg)
+        .slice(0, limit)
+    }
+
+    logStats() {
+      if (!this.enabled) return
+
+      const stats = this.getStats();
+      if (!stats) return
+
+      console.group('🔍 Ryunix Performance Stats');
+      console.log(`Total renders: ${stats.count}`);
+      console.log(`Avg render time: ${stats.avg.toFixed(2)}ms`);
+      console.log(
+        `Min: ${stats.min.toFixed(2)}ms | Max: ${stats.max.toFixed(2)}ms`,
+      );
+
+      const slowest = this.getSlowestComponents(5);
+      if (slowest.length > 0) {
+        console.log('\n⚠️  Slowest components:');
+        slowest.forEach((comp, i) => {
+          console.log(
+            `${i + 1}. ${comp.name}: ${comp.avg.toFixed(2)}ms avg (${comp.count} renders)`,
+          );
+        });
+      }
+      console.groupEnd();
+    }
+
+    clear() {
+      this.renderTimes = [];
+      this.measures.clear();
+    }
 
-    return createElement('img', ImageProps, null)
+    enable() {
+      this.enabled = true;
+    }
+
+    disable() {
+      this.enabled = false;
+    }
+  }
+
+  // Global profiler instance
+  const profiler = new Profiler();
+
+  /**
+   * Hook to profile component render
+   */
+  const useProfiler = (componentName) => {
+    const startTime = performance.now();
+
+    return () => {
+      const duration = performance.now() - startTime;
+      profiler.recordRender(componentName, duration);
+    }
   };
 
   /**
-   * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
-   * browser needs to yield to other tasks.
-   * @param deadline - The `deadline` parameter is an object that represents the amount of time the
-   * browser has to perform work before it needs to handle other tasks. It has a `timeRemaining()` method
-   * that returns the amount of time remaining before the deadline is reached. The `shouldYield` variable
-   * is used to determine
+   * HOC to profile component
    */
+  const withProfiler = (Component, name) => {
+    return (props) => {
+      profiler.startMeasure(name);
+      const result = Component(props);
+      const duration = profiler.endMeasure(name);
+      if (duration) profiler.recordRender(name, duration);
+      return result
+    }
+  };
+
   const workLoop = (deadline) => {
+    const state = getState();
     let shouldYield = false;
-    while (vars.nextUnitOfWork && !shouldYield) {
-      vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork);
+
+    while (state.nextUnitOfWork && !shouldYield) {
+      state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
       shouldYield = deadline.timeRemaining() < 1;
     }
 
-    if (!vars.nextUnitOfWork && vars.wipRoot) {
+    if (!state.nextUnitOfWork && state.wipRoot) {
       commitRoot();
     }
 
@@ -513,25 +797,21 @@
 
   requestIdleCallback(workLoop);
 
-  /**
-   * The function performs a unit of work by updating either a function component or a host component and
-   * returns the next fiber to be processed.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to its
-   * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
-   * performs work
-   * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
-   * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
-   * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
-   * sibling of the parent. The function returns `null` if there are no more fibers to process.
-   */
   const performUnitOfWork = (fiber) => {
+    const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
+
+    profiler.startMeasure(componentName);
+
     const isFunctionComponent = fiber.type instanceof Function;
     if (isFunctionComponent) {
       updateFunctionComponent(fiber);
     } else {
       updateHostComponent(fiber);
     }
+
+    const duration = profiler.endMeasure(componentName);
+    if (duration) profiler.recordRender(componentName, duration);
+
     if (fiber.child) {
       return fiber.child
     }
@@ -544,237 +824,223 @@
     }
   };
 
-  const scheduleWork = (root) => {
-    vars.nextUnitOfWork = root;
-    vars.wipRoot = root;
-    vars.deletions = [];
-
-    vars.hookIndex = 0;
-    vars.effects = [];
-    requestIdleCallback(workLoop);
+  const scheduleWork = (root, priority = Priority.NORMAL) => {
+    const state = getState();
+    state.nextUnitOfWork = root;
+    state.wipRoot = root;
+    state.deletions = [];
+    state.hookIndex = 0;
+    state.effects = [];
+
+    // Higher priority = faster scheduling
+    if (priority <= Priority.USER_BLOCKING) {
+      requestIdleCallback(workLoop);
+    } else {
+      setTimeout(() => requestIdleCallback(workLoop), 0);
+    }
   };
 
-  /**
-   * Renders an element into a container using a work-in-progress (WIP) root.
-   * @function render
-   * @param {Object|HTMLElement} element - The element to be rendered in the container. It can be a Ryunix component (custom element) or a standard DOM element.
-   * @param {HTMLElement} container - The container where the element will be rendered. This parameter is optional if `createRoot()` is used beforehand to set up the container.
-   * @description The function assigns the `container` to a work-in-progress root and sets up properties for reconciliation, including children and the reference to the current root.
-   * It also clears any scheduled deletions and establishes the next unit of work for incremental rendering.
-   */
   const render = (element, container) => {
-    vars.wipRoot = {
+    const state = getState();
+    state.wipRoot = {
       dom: container,
       props: {
         children: [element],
       },
-      alternate: vars.currentRoot,
+      alternate: state.currentRoot,
     };
 
-    vars.nextUnitOfWork = vars.wipRoot;
-    vars.deletions = [];
-    scheduleWork(vars.wipRoot);
-    return vars.wipRoot
+    state.nextUnitOfWork = state.wipRoot;
+    state.deletions = [];
+    scheduleWork(state.wipRoot);
+    return state.wipRoot
   };
 
-  /**
-   * Initializes the application by creating a reference to a DOM element with the specified ID and rendering the main component.
-   * @function init
-   * @param {Object} MainElement - The main component to render, typically the root component of the application.
-   * @param {string} [root='__ryunix'] - The ID of the HTML element that serves as the container for the root element. Defaults to `'__ryunix'` if not provided.
-   * @example
-   * Ryunix.init(App, "__ryunix"); // Initializes and renders the App component into the <div id="__ryunix"></div> element.
-   * @description This function retrieves the container element by its ID and invokes the `render` function to render the main component into it.
-   */
   const init = (MainElement, root = '__ryunix') => {
-    vars.containerRoot = document.getElementById(root);
+    const state = getState();
+    state.containerRoot = document.getElementById(root);
+    const renderProcess = render(MainElement, state.containerRoot);
+    return renderProcess
+  };
 
-    const renderProcess = render(MainElement, vars.containerRoot);
+  const safeRender = (component, props, onError) => {
+    try {
+      return component(props)
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('Component error:', error);
+      }
+      if (onError) onError(error);
+      return null
+    }
+  };
 
-    return renderProcess
+  const validateHookCall = () => {
+    const state = getState();
+    if (!state.wipFiber) {
+      throw new Error(
+        'Hooks can only be called inside the body of a function component.',
+      )
+    }
+    if (!Array.isArray(state.wipFiber.hooks)) {
+      state.wipFiber.hooks = [];
+    }
   };
 
-  /**
-   * @description The function creates a state.
-   * @param initial - The initial value of the state for the hook.
-   * @returns The `useStore` function returns an array with two elements: the current state value and a
-   * `setState` function that can be used to update the state.
-   */
-  const useStore = (initialState, init) => {
-    const reducer = (state, action) =>
-      typeof action === 'function' ? action(state) : action;
+  const haveDepsChanged = (oldDeps, newDeps) => {
+    if (!oldDeps || !newDeps) return true
+    if (oldDeps.length !== newDeps.length) return true
+    return oldDeps.some((dep, i) => !Object.is(dep, newDeps[i]))
+  };
 
-    return useReducer(reducer, initialState, init)
+  const useStore = (initialState) => {
+    const reducer = (state, action) =>
+      is.function(action) ? action(state) : action;
+    return useReducer(reducer, initialState)
   };
 
-  /**
-   * The `useReducer` function in JavaScript is used to manage state updates based on actions dispatched
-   * to a reducer function.
-   * @param reducer - The `reducer` parameter in the `useReducer` function is a function that takes the
-   * current state and an action as arguments, and returns the new state based on the action. It is used
-   * to update the state in response to different actions dispatched by the `dispatch` function.
-   * @param initialState - The `initialState` parameter in the `useReducer` function represents the
-   * initial state of the reducer. It is the state that will be used when the reducer is first
-   * initialized or reset. This initial state can be any value or object that the reducer will operate on
-   * and update based on the dispatched actions
-   * @param init - The `init` parameter in the `useReducer` function is an optional function that can be
-   * used to initialize the state. If provided, it will be called with the `initialState` as its argument
-   * and the return value will be used as the initial state value. If `init` is not
-   * @returns The `useReducer` function is returning an array with two elements: the current state and a
-   * dispatch function.
-   */
   const useReducer = (reducer, initialState, init) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    validateHookCall();
+
+    const state = getState();
+    const { wipFiber, hookIndex } = state;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
     const hook = {
-      hookID: vars.hookIndex,
+      hookID: hookIndex,
       type: RYUNIX_TYPES.RYUNIX_STORE,
       state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
-      queue: oldHook && Array.isArray(oldHook.queue) ? oldHook.queue.slice() : [],
+      queue: [], // Siempre nueva cola vacía
     };
 
-    if (oldHook && Array.isArray(oldHook.queue)) {
+    // Procesar acciones del render anterior
+    if (oldHook?.queue) {
       oldHook.queue.forEach((action) => {
-        hook.state = reducer(hook.state, action);
+        try {
+          hook.state = reducer(hook.state, action);
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Error in reducer:', error);
+          }
+        }
       });
     }
 
     const dispatch = (action) => {
-      hook.queue.push(
-        typeof action === STRINGS.function ? action : (prev) => action,
-      );
+      if (action === undefined) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('dispatch called with undefined action');
+        }
+        return
+      }
 
-      vars.wipRoot = {
-        dom: vars.currentRoot.dom,
-        props: vars.currentRoot.props,
-        alternate: vars.currentRoot,
+      hook.queue.push(action);
+
+      const currentState = getState();
+      currentState.wipRoot = {
+        dom: currentState.currentRoot.dom,
+        props: currentState.currentRoot.props,
+        alternate: currentState.currentRoot,
       };
-      vars.deletions = [];
-      vars.hookIndex = 0;
-      scheduleWork(vars.wipRoot);
+      currentState.deletions = [];
+      currentState.hookIndex = 0;
+      scheduleWork(currentState.wipRoot);
     };
 
-    hook.queue.forEach((action) => {
-      hook.state = reducer(hook.state, action);
-    });
-
-    vars.wipFiber.hooks[vars.hookIndex] = hook;
-    vars.hookIndex++;
-
+    wipFiber.hooks[hookIndex] = hook;
+    state.hookIndex++;
     return [hook.state, dispatch]
   };
 
-  /**
-   * This is a function that creates a hook for managing side effects in Ryunix components.
-   * @param effect - The effect function that will be executed after the component has rendered or when
-   * the dependencies have changed. It can perform side effects such as fetching data, updating the DOM,
-   * or subscribing to events.
-   * @param deps - An array of dependencies that the effect depends on. If any of the dependencies change
-   * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
-   * mount and never again.
-   */
-
   const useEffect = (callback, deps) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    validateHookCall();
+
+    if (!is.function(callback)) {
+      throw new Error('useEffect callback must be a function')
+    }
+    if (deps !== undefined && !Array.isArray(deps)) {
+      throw new Error('useEffect dependencies must be an array or undefined')
+    }
 
-    const hasChanged = hasDepsChanged(oldHook?.deps, deps);
+    const state = getState();
+    const { wipFiber, hookIndex } = state;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+    const hasChanged = haveDepsChanged(oldHook?.deps, deps);
 
     const hook = {
-      hookID: vars.hookIndex,
+      hookID: hookIndex,
       type: RYUNIX_TYPES.RYUNIX_EFFECT,
       deps,
       effect: hasChanged ? callback : null,
       cancel: oldHook?.cancel,
     };
 
-    vars.wipFiber.hooks[vars.hookIndex] = hook;
-    vars.hookIndex++;
+    wipFiber.hooks[hookIndex] = hook;
+    state.hookIndex++;
   };
 
-  /**
-   * The useRef function in JavaScript is used to create a reference object that persists between renders
-   * in a functional component.
-   * @param initial - The `initial` parameter in the `useRef` function represents the initial value that
-   * will be assigned to the `current` property of the reference object. This initial value will be used
-   * if there is no previous value stored in the hook.
-   * @returns The `useRef` function is returning the `current` property of the `hook.value` object. This
-   * property contains the current value of the reference being managed by the `useRef` hook.
-   */
-  const useRef = (initial) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+  const useRef = (initialValue) => {
+    validateHookCall();
+
+    const state = getState();
+    const { wipFiber, hookIndex } = state;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
     const hook = {
+      hookID: hookIndex,
       type: RYUNIX_TYPES.RYUNIX_REF,
-      value: oldHook ? oldHook.value : { current: initial },
+      value: oldHook ? oldHook.value : { current: initialValue },
     };
 
-    vars.wipFiber.hooks[vars.hookIndex] = hook;
-    vars.hookIndex++;
-
+    wipFiber.hooks[hookIndex] = hook;
+    state.hookIndex++;
     return hook.value
   };
 
-  /**
-   * The useMemo function in JavaScript is used to memoize the result of a computation based on the
-   * dependencies provided.
-   * @param comp - The `comp` parameter in the `useMemo` function is a function that represents the
-   * computation that needs to be memoized. This function will be executed to calculate the memoized
-   * value based on the dependencies provided.
-   * @param deps - The `deps` parameter in the `useMemo` function stands for dependencies. It is an array
-   * of values that the function depends on. The `useMemo` function will only recompute the memoized
-   * value when one of the dependencies has changed.
-   * @returns The `useMemo` function returns the `value` property of the `hook` object, which is either
-   * the memoized value from the previous render if the dependencies have not changed, or the result of
-   * calling the `comp` function if the dependencies have changed.
-   */
-  const useMemo = (comp, deps) => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+  const useMemo = (compute, deps) => {
+    validateHookCall();
 
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_MEMO,
-      value: null,
-      deps,
-    };
+    if (!is.function(compute)) {
+      throw new Error('useMemo callback must be a function')
+    }
+    if (!Array.isArray(deps)) {
+      throw new Error('useMemo requires a dependencies array')
+    }
 
-    if (oldHook) {
-      if (lodash.isEqual(oldHook.deps, hook.deps)) {
-        hook.value = oldHook.value;
-      } else {
-        hook.value = comp();
-      }
+    const state = getState();
+    const { wipFiber, hookIndex } = state;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+
+    let value;
+    if (oldHook && !haveDepsChanged(oldHook.deps, deps)) {
+      value = oldHook.value;
     } else {
-      hook.value = comp();
+      try {
+        value = compute();
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error in useMemo computation:', error);
+        }
+        value = undefined;
+      }
     }
 
-    vars.wipFiber.hooks[vars.hookIndex] = hook;
-    vars.hookIndex++;
+    const hook = {
+      hookID: hookIndex,
+      type: RYUNIX_TYPES.RYUNIX_MEMO,
+      value,
+      deps,
+    };
 
-    return hook.value
+    wipFiber.hooks[hookIndex] = hook;
+    state.hookIndex++;
+    return value
   };
 
-  /**
-   * The useCallback function in JavaScript returns a memoized version of the callback function that only
-   * changes if one of the dependencies has changed.
-   * @param callback - The `callback` parameter is a function that you want to memoize using
-   * `useCallback`. This function will only be re-created if any of the dependencies specified in the
-   * `deps` array change.
-   * @param deps - Dependencies array that the callback function depends on.
-   * @returns The useCallback function is returning a memoized version of the callback function. It is
-   * using the useMemo hook to memoize the callback function based on the provided dependencies (deps).
-   */
   const useCallback = (callback, deps) => {
+    if (!is.function(callback)) {
+      throw new Error('useCallback requires a function as first argument')
+    }
     return useMemo(() => callback, deps)
   };
 
@@ -782,55 +1048,109 @@
     contextId = RYUNIX_TYPES.RYUNIX_CONTEXT,
     defaultValue = {},
   ) => {
-    const Provider = ({ children }) => {
-      return Fragment({
-        children: children,
-      })
+    const Provider = ({ children, value }) => {
+      const element = Fragment({ children });
+      element._contextId = contextId;
+      element._contextValue = value;
+      return element
     };
 
     Provider._contextId = contextId;
 
-    const useContext = (ctxID = RYUNIX_TYPES.RYUNIX_CONTEXT) => {
-      let fiber = vars.wipFiber;
+    const useContext = (ctxID = contextId) => {
+      validateHookCall();
+
+      const state = getState();
+      let fiber = state.wipFiber;
+
       while (fiber) {
-        if (fiber.type && fiber.type._contextId === ctxID) {
-          if (fiber.props && 'value' in fiber.props) {
-            return fiber.props.value
-          }
-          return undefined
+        if (fiber._contextId === ctxID && fiber._contextValue !== undefined) {
+          return fiber._contextValue
+        }
+        if (
+          fiber.type?._contextId === ctxID &&
+          fiber.props?.value !== undefined
+        ) {
+          return fiber.props.value
         }
         fiber = fiber.parent;
       }
       return defaultValue
     };
 
-    return {
-      Provider,
-      useContext,
-    }
+    return { Provider, useContext }
   };
 
   const useQuery = () => {
+    if (typeof window === 'undefined') return {}
+
     const searchParams = new URLSearchParams(window.location.search);
     const query = {};
-    for (let [key, value] of searchParams.entries()) {
+    for (const [key, value] of searchParams.entries()) {
       query[key] = value;
     }
     return query
   };
 
   const useHash = () => {
+    if (typeof window === 'undefined') return ''
+
     const [hash, setHash] = useStore(window.location.hash);
     useEffect(() => {
-      const onHashChange = () => {
-        setHash(window.location.hash);
-      };
+      const onHashChange = () => setHash(window.location.hash);
       window.addEventListener('hashchange', onHashChange);
       return () => window.removeEventListener('hashchange', onHashChange)
     }, []);
     return hash
   };
 
+  const useMetadata = (tags = {}, options = {}) => {
+    useEffect(() => {
+      if (typeof document === 'undefined') return
+
+      let finalTitle = 'Ryunix App';
+      const template = options.title?.template;
+      const defaultTitle = options.title?.prefix || 'Ryunix App';
+      const pageTitle = tags.pageTitle || tags.title;
+
+      if (is.string(pageTitle) && pageTitle.trim()) {
+        finalTitle = template?.includes('%s')
+          ? template.replace('%s', pageTitle)
+          : pageTitle;
+      } else {
+        finalTitle = defaultTitle;
+      }
+
+      document.title = finalTitle;
+
+      if (tags.canonical) {
+        let link = document.querySelector('link[rel="canonical"]');
+        if (!link) {
+          link = document.createElement('link');
+          link.setAttribute('rel', 'canonical');
+          document.head.appendChild(link);
+        }
+        link.setAttribute('href', tags.canonical);
+      }
+
+      Object.entries(tags).forEach(([key, value]) => {
+        if (['title', 'pageTitle', 'canonical'].includes(key)) return
+
+        const isProperty = key.startsWith('og:') || key.startsWith('twitter:');
+        const selector = `meta[${isProperty ? 'property' : 'name'}='${key}']`;
+        let meta = document.head.querySelector(selector);
+
+        if (!meta) {
+          meta = document.createElement('meta');
+          meta.setAttribute(isProperty ? 'property' : 'name', key);
+          document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', value);
+      });
+    }, [JSON.stringify(tags), JSON.stringify(options)]);
+  };
+
+  // Router Context
   const RouterContext = createContext('ryunix.navigation', {
     location: '/',
     params: {},
@@ -841,7 +1161,6 @@
 
   const findRoute = (routes, path) => {
     const pathname = path.split('?')[0].split('#')[0];
-
     const notFoundRoute = routes.find((route) => route.NotFound);
     const notFound = notFoundRoute
       ? { route: { component: notFoundRoute.NotFound }, params: {} }
@@ -852,18 +1171,8 @@
         const childRoute = findRoute(route.subRoutes, path);
         if (childRoute) return childRoute
       }
-
-      if (route.path === '*') {
-        return notFound
-      }
-
-      if (!route.path || typeof route.path !== 'string') {
-        console.warn('Invalid route detected:', route);
-        console.info(
-          "if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }",
-        );
-        continue
-      }
+      if (route.path === '*') return notFound
+      if (!route.path || typeof route.path !== 'string') continue
 
       const keys = [];
       const pattern = new RegExp(
@@ -879,11 +1188,9 @@
           acc[key] = match[index + 1];
           return acc
         }, {});
-
         return { route, params }
       }
     }
-
     return notFound
   };
 
@@ -892,7 +1199,6 @@
 
     useEffect(() => {
       const update = () => setLocation(window.location.pathname);
-
       window.addEventListener('popstate', update);
       window.addEventListener('hashchange', update);
       return () => {
@@ -907,7 +1213,6 @@
     };
 
     const currentRouteData = findRoute(routes, location) || {};
-
     const query = useQuery();
 
     const contextValue = {
@@ -921,9 +1226,7 @@
     return createElement(
       RouterContext.Provider,
       { value: contextValue },
-      Fragment({
-        children: children,
-      }),
+      Fragment({ children }),
     )
   };
 
@@ -954,7 +1257,6 @@
 
   const NavLink = ({ to, exact = false, ...props }) => {
     const { location, navigate } = useRouter();
-
     const isActive = exact ? location === to : location.startsWith(to);
 
     const resolveClass = (cls) =>
@@ -966,7 +1268,6 @@
     };
 
     const classAttrName = props['ryunix-class'] ? 'ryunix-class' : 'className';
-
     const classAttrValue = resolveClass(
       props['ryunix-class'] || props['className'],
     );
@@ -990,74 +1291,59 @@
   };
 
   /**
-   * useMetadata: Hook to dynamically manage SEO metadata in the <head>.
-   * Supports title with template, description, robots, robots, canonical, OpenGraph, Twitter, and any standard meta.
-   * @param {Object} tags - Object with metatags to insert/update.
-   * @param {Object} options - Optional. Allows to define template and default for the title.
+   * useStore with priority support
+   */
+  const useStorePriority = (initialState) => {
+    const reducer = (state, action) =>
+      typeof action === 'function' ? action.value(state) : action.value;
+
+    const [state, baseDispatch] = useReducer(reducer, initialState);
+
+    const dispatch = (action, priority = Priority.NORMAL) => {
+      const wrappedAction = {
+        value: action,
+        priority,
+      };
+
+      baseDispatch(wrappedAction);
+    };
+
+    return [state, dispatch]
+  };
+
+  /**
+   * useTransition - Mark updates as non-urgent
+   */
+  const useTransition = () => {
+    const [isPending, setIsPending] = useStorePriority(false);
+
+    const startTransition = (callback) => {
+      setIsPending(true, Priority.IMMEDIATE);
 
+      setTimeout(() => {
+        callback();
+        setIsPending(false, Priority.IMMEDIATE);
+      }, 0);
+    };
+
+    return [isPending, startTransition]
+  };
+
+  /**
+   * useDeferredValue - Defer value updates
    */
+  const useDeferredValue = (value) => {
+    const [deferredValue, setDeferredValue] = useStorePriority(value);
 
-  const useMetadata = (tags = {}, options = {}) => {
     useEffect(() => {
-      if (typeof document === 'undefined') return // SSR safe
-
-      let finalTitle = '';
-      let template = undefined;
-      let defaultTitle = 'Ryunix App';
-      if (options.title && typeof options.title === 'object') {
-        template = options.title.template;
-        if (typeof options.title.prefix === 'string') {
-          defaultTitle = options.title.prefix;
-        }
-      }
+      const timeout = setTimeout(() => {
+        setDeferredValue(value, Priority.LOW);
+      }, 100);
 
-      // pageTitle tiene prioridad sobre title
-      let pageTitle = tags.pageTitle || tags.title;
+      return () => clearTimeout(timeout)
+    }, [value]);
 
-      if (typeof pageTitle === 'string') {
-        if (pageTitle.trim() === '') {
-          finalTitle = defaultTitle;
-        } else if (template && template.includes('%s')) {
-          finalTitle = template.replace('%s', pageTitle);
-        } else {
-          finalTitle = pageTitle;
-        }
-      } else if (typeof pageTitle === 'object' && pageTitle !== null) {
-        finalTitle = defaultTitle;
-      } else if (!pageTitle) {
-        finalTitle = defaultTitle;
-      }
-      document.title = finalTitle;
-      // Canonical
-      if (tags.canonical) {
-        let link = document.querySelector('link[rel="canonical"]');
-        if (!link) {
-          link = document.createElement('link');
-          link.setAttribute('rel', 'canonical');
-          document.head.appendChild(link);
-        }
-        link.setAttribute('href', tags.canonical);
-      }
-      // Meta tags
-      Object.entries(tags).forEach(([key, value]) => {
-        if (key === 'title' || key === 'pageTitle' || key === 'canonical') return
-        let selector = `meta[name='${key}']`;
-        if (key.startsWith('og:') || key.startsWith('twitter:')) {
-          selector = `meta[property='${key}']`;
-        }
-        let meta = document.head.querySelector(selector);
-        if (!meta) {
-          meta = document.createElement('meta');
-          if (key.startsWith('og:') || key.startsWith('twitter:')) {
-            meta.setAttribute('property', key);
-          } else {
-            meta.setAttribute('name', key);
-          }
-          document.head.appendChild(meta);
-        }
-        meta.setAttribute('content', value);
-      });
-    }, [JSON.stringify(tags), JSON.stringify(options)]);
+    return deferredValue
   };
 
   var Hooks = /*#__PURE__*/Object.freeze({
@@ -1067,22 +1353,136 @@
     RouterProvider: RouterProvider,
     createContext: createContext,
     useCallback: useCallback,
+    useDeferredValue: useDeferredValue,
     useEffect: useEffect,
     useHash: useHash,
     useMemo: useMemo,
     useMetadata: useMetadata,
     useQuery: useQuery,
+    useReducer: useReducer,
     useRef: useRef,
     useRouter: useRouter,
-    useStore: useStore
+    useStore: useStore,
+    useStorePriority: useStorePriority,
+    useTransition: useTransition
   });
 
+  /**
+   * memo - Memoize component to prevent unnecessary re-renders
+   */
+  const memo = (Component, arePropsEqual) => {
+    return (props) => {
+      const memoizedElement = useMemo(() => {
+        return Component(props)
+      }, [
+        // Default comparison: shallow props comparison
+        ...Object.values(props),
+      ]);
+
+      return memoizedElement
+    }
+  };
+
+  /**
+   * Lazy load component
+   */
+  const lazy = (importFn) => {
+    let Component = null;
+    let promise = null;
+    let error = null;
+
+    return (props) => {
+      const [, forceUpdate] = useStore(0);
+
+      useEffect(() => {
+        if (Component || error) return
+
+        if (!promise) {
+          promise = importFn()
+            .then((module) => {
+              Component = module.default || module;
+              forceUpdate((x) => x + 1);
+            })
+            .catch((err) => {
+              error = err;
+              forceUpdate((x) => x + 1);
+            });
+        }
+      }, []);
+
+      if (error) throw error
+      if (!Component) return null
+      return createElement(Component, props)
+    }
+  };
+
+  /**
+   * Suspense component (basic implementation)
+   */
+  const Suspense = ({ fallback, children }) => {
+    const [isLoading, setIsLoading] = useStore(true);
+
+    useEffect(() => {
+      setIsLoading(false);
+    }, []);
+
+    if (isLoading && fallback) {
+      return fallback
+    }
+
+    return children
+  };
+
+  let isBatching = false;
+  let pendingUpdates = [];
+
+  /**
+   * Batch multiple state updates into single render
+   */
+  const batchUpdates = (callback) => {
+    const wasBatching = isBatching;
+    isBatching = true;
+
+    try {
+      callback();
+    } finally {
+      isBatching = wasBatching;
+
+      if (!isBatching && pendingUpdates.length > 0) {
+        flushUpdates();
+      }
+    }
+  };
+
+  /**
+   * Flush all pending updates
+   */
+  const flushUpdates = () => {
+    if (pendingUpdates.length === 0) return
+
+    const updates = pendingUpdates;
+    pendingUpdates = [];
+
+    // Execute all updates
+    updates.forEach((update) => update());
+  };
+
+  // Ryunix.*
   var Ryunix = {
     createElement,
     render,
     init,
     Fragment,
     Hooks,
+    memo,
+    lazy,
+    Suspense,
+    safeRender,
+    batchUpdates,
+    Priority,
+    profiler,
+    useProfiler,
+    withProfiler,
   };
 
   window.Ryunix = Ryunix;
@@ -1094,14 +1494,18 @@
   exports.createContext = createContext;
   exports.default = Ryunix;
   exports.useCallback = useCallback;
+  exports.useDeferredValue = useDeferredValue;
   exports.useEffect = useEffect;
   exports.useHash = useHash;
   exports.useMemo = useMemo;
   exports.useMetadata = useMetadata;
   exports.useQuery = useQuery;
+  exports.useReducer = useReducer;
   exports.useRef = useRef;
   exports.useRouter = useRouter;
   exports.useStore = useStore;
+  exports.useStorePriority = useStorePriority;
+  exports.useTransition = useTransition;
 
   Object.defineProperty(exports, '__esModule', { value: true });