diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 0846199..5f3e94c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,6 +8,7 @@ on:
   pull_request:
     branches:
       - main
+      - next
 
 jobs:
   build:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e08d71..440ee72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Add ability to pass attributes to a component on mount
+
+## [0.0.33-1] - 2024-06-02
+
+### Fixed
+
+- `Component<S>` now requires `state` if `S` is defined ([#43](https://github.com/tentjs/tent/issues/43))
+
+## [0.0.33-0] - 2024-05-27
+
+### Added
+
+- Add `mounted` to `tags` to run code after the tag has been mounted
+
 ## [0.0.32] - 2024-05-20
 
 ### Fixed
diff --git a/package-lock.json b/package-lock.json
index 3120e25..5aeef43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@tentjs/tent",
-  "version": "0.0.32",
+  "version": "0.0.33-1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@tentjs/tent",
-      "version": "0.0.32",
+      "version": "0.0.33-1",
       "license": "MIT",
       "devDependencies": {
         "@parcel/packager-ts": "^2.10.3",
diff --git a/package.json b/package.json
index 018c510..b449cb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tentjs/tent",
-  "version": "0.0.32",
+  "version": "0.0.33-1",
   "description": "A jsx-free, super-lightweight and zero-dependency library to add interactivity to the web - without all the nonsense.",
   "source": "src/main.ts",
   "main": "dist/main.js",
diff --git a/src/__tests__/attributes.test.ts b/src/__tests__/attributes.test.ts
index 1fb664d..e5b595b 100644
--- a/src/__tests__/attributes.test.ts
+++ b/src/__tests__/attributes.test.ts
@@ -1,4 +1,5 @@
-import { addAttribute } from '../attributes';
+import { addAttribute, addAttributes } from '../attributes';
+import { tags } from '../tags';
 
 describe('attributes.ts', () => {
   test('adds a simple attribute', () => {
@@ -34,4 +35,24 @@ describe('attributes.ts', () => {
 
     expect(el.value).toBe('test');
   });
+
+  test("doesn't add `mounted` as an attribute", () => {
+    const el = document.createElement('div');
+
+    addAttribute(el, 'mounted', 'test');
+
+    expect(el.hasAttribute('mounted')).toBe(false);
+  });
+
+  test('addAttributes adds all attributes', () => {
+    const el = tags.div([]);
+
+    addAttributes(el, {
+      id: 'test',
+      foo: 'bar',
+    });
+
+    expect(el.getAttribute('id')).toBe('test');
+    expect(el.getAttribute('foo')).toBe('bar');
+  });
 });
diff --git a/src/__tests__/component.test.ts b/src/__tests__/component.test.ts
index 44cae56..40a05f2 100644
--- a/src/__tests__/component.test.ts
+++ b/src/__tests__/component.test.ts
@@ -5,6 +5,10 @@ import { getByText, getByTestId, fireEvent } from '@testing-library/dom';
 
 const { div, p, button } = tags;
 
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
 const Counter: Component<{ count: number }> = {
   state: { count: 0 },
   view: ({ state }) =>
@@ -47,4 +51,29 @@ describe('components', () => {
 
     expect(mounted).toHaveBeenCalledTimes(1);
   });
+
+  test('with state', () => {
+    const WithState: Component<{ count: number }> = {
+      state: { count: 0 },
+      view: ({ state }) => div(p(`Count: ${state.count}`)),
+    };
+
+    mount(document.body, WithState);
+
+    const el = getByText(document.body, /Count: 0/);
+
+    expect(el).toBeDefined();
+  });
+
+  test('without state', () => {
+    const WithoutState: Component = {
+      view: () => div(p(`No state`)),
+    };
+
+    mount(document.body, WithoutState);
+
+    const el = getByText(document.body, /No state/);
+
+    expect(el).toBeDefined();
+  });
 });
diff --git a/src/__tests__/main.test.ts b/src/__tests__/main.test.ts
index 52e4931..efc94cd 100644
--- a/src/__tests__/main.test.ts
+++ b/src/__tests__/main.test.ts
@@ -1,4 +1,9 @@
-import { Component, mount, tags } from '../main';
+import { fireEvent, getByRole, getByTestId } from '@testing-library/dom';
+import { mount, tags, type Component } from '../main';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
 
 describe('main', () => {
   test('`null` element', () => {
@@ -34,4 +39,65 @@ describe('main', () => {
       }),
     ).not.toThrow();
   });
+
+  test('that attributes are set when using `mount` with attrs set', () => {
+    const target = document.createElement('div');
+    target.setAttribute('data-testid', 'test');
+    document.body.append(target);
+
+    const TestComponent: Component = {
+      view: () => tags.div('Hey, this is me!'),
+    };
+
+    mount(target, TestComponent, {
+      id: 'foo',
+      foo: 'bar',
+    });
+
+    const el = getByTestId(document.body, 'test');
+
+    expect(el.getAttribute('id')).toBe('foo');
+    expect(el.getAttribute('foo')).toBe('bar');
+  });
+
+  test('that attributes are set when using `mount` and dynamic mounting', () => {
+    const target = document.createElement('div');
+    target.setAttribute('data-testid', 'test');
+    document.body.append(target);
+
+    const modalTarget = document.createElement('div');
+    modalTarget.setAttribute('data-testid', 'modal');
+    document.body.append(modalTarget);
+
+    const Parent: Component = {
+      view: () =>
+        tags.button('Click me', {
+          onclick() {
+            mount(modalTarget, Modal, { modalId: 'foo' });
+          },
+        }),
+    };
+
+    const Modal: Component = {
+      view: () => tags.p('I am a modal'),
+    };
+
+    mount(target, Parent, {
+      id: 'foo',
+      foo: 'bar',
+    });
+
+    const el = getByTestId(document.body, 'test');
+
+    expect(el.getAttribute('id')).toBe('foo');
+    expect(el.getAttribute('foo')).toBe('bar');
+
+    const btn = getByRole(document.body, 'button');
+
+    fireEvent.click(btn);
+
+    const modal = getByTestId(document.body, 'modal');
+
+    expect(modal.getAttribute('modalId')).toBe('foo');
+  });
 });
diff --git a/src/__tests__/tags.test.ts b/src/__tests__/tags.test.ts
index ce810ab..89ef009 100644
--- a/src/__tests__/tags.test.ts
+++ b/src/__tests__/tags.test.ts
@@ -68,4 +68,12 @@ describe('tags.ts', () => {
     expect(el.$tent.attributes['data-bar']).toBe('baz');
     expect(el.$tent.attributes['onclick']).toBe(fn);
   });
+
+  test('mounted', () => {
+    const fn = jest.fn();
+    const el = createTag(['div', 'test', { mounted: fn }]);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith({ el });
+  });
 });
diff --git a/src/attributes.ts b/src/attributes.ts
index 1529e2e..398606b 100644
--- a/src/attributes.ts
+++ b/src/attributes.ts
@@ -1,10 +1,24 @@
-import { type TentNode, type Attrs } from './types';
+import { type TentNode, type Attrs, type TagAttrsValues } from './types';
+
+function addAttributes<A extends Attrs>(el: TentNode<A>, attributes: A) {
+  for (const key in attributes) {
+    const value = attributes[key as string];
+
+    addAttribute(el, key, value);
+  }
+}
 
 function addAttribute<A extends Attrs>(
   el: TentNode<A> | HTMLElement,
   key: string,
-  value: string | boolean | number,
+  value: TagAttrsValues,
 ) {
+  if (key === 'mounted') return;
+
+  if ('$tent' in el) {
+    el.$tent.attributes[key] = value;
+  }
+
   if (typeof value === 'boolean') {
     if (value) {
       el.setAttribute(key, '');
@@ -24,29 +38,4 @@ function addAttribute<A extends Attrs>(
   }
 }
 
-/**
- * @deprecated
- * Use `el.dataset` instead, will be removed in the next major version.
- */
-function getAttribute<A>(el: HTMLElement | Element) {
-  return <K extends keyof A>(name: K): A[K] | undefined => {
-    const attr = el.attributes.getNamedItem(name as string);
-
-    if (!attr) {
-      return;
-    }
-
-    const value = attr.value;
-
-    if (value === '') {
-      // TODO: This might not be the desired behavior.
-      // I should find a better way to handle this,
-      // what I want to avoid is returning `T | undefined | 'true'`
-      return 'true' as A[K];
-    }
-
-    return value as A[K];
-  };
-}
-
-export { addAttribute, getAttribute };
+export { addAttributes, addAttribute };
diff --git a/src/main.ts b/src/main.ts
index 66d1c9d..b3f2a35 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,29 +1,22 @@
-import { getAttribute } from './attributes';
-import {
-  type Children,
-  type Context,
-  type Component,
-  type TentNode,
-  type Attrs,
-} from './types';
+import type { Children, Context, Component, TentNode, Attrs } from './types';
 import { createTag, tags } from './tags';
 import { walker } from './walker';
+import { addAttributes } from './attributes';
 
 function mount<S extends {} = {}, A extends Attrs = {}>(
   element: HTMLElement | Element | TentNode<A> | null,
   component: Component<S, A>,
+  attributes?: A,
 ) {
-  if (element == null) {
-    return;
-  }
+  if (element == null) return;
 
   let node: TentNode<A>;
-  const { state = {} as S, view, mounted } = component;
+  const { view, mounted } = component;
+  const state = 'state' in component ? component.state : ({} as S);
   const el = element as TentNode<A>;
 
-  el.$tent = {
-    attributes: {},
-  };
+  el.$tent = { attributes: {} };
+  addAttributes(el, attributes);
 
   const handler = {
     get(obj: S, key: string) {
@@ -43,7 +36,7 @@ function mount<S extends {} = {}, A extends Attrs = {}>(
 
       const s = Reflect.set(obj, prop, value);
 
-      walker(node, view({ state: proxy, el, attr: getAttribute<A>(el) }));
+      walker(node, view({ state: proxy, el }));
 
       return s;
     },
@@ -51,22 +44,20 @@ function mount<S extends {} = {}, A extends Attrs = {}>(
 
   const proxy = new Proxy<S>({ ...state }, handler);
 
-  node = view({ state: proxy, el, attr: getAttribute<A>(el) });
-  node.$tent = {
-    attributes: {},
-  };
+  node = view({ state: proxy, el });
+  node.$tent = { attributes: {} };
 
   el.append(node);
 
-  mounted?.({ state: proxy, el, attr: getAttribute<A>(el) });
+  mounted?.({ state: proxy, el });
 }
 
 export {
-  mount,
   tags,
+  mount,
   createTag,
-  type Component,
-  type Children,
   type Context,
   type TentNode,
+  type Children,
+  type Component,
 };
diff --git a/src/tags.ts b/src/tags.ts
index 0edfee3..d73d294 100644
--- a/src/tags.ts
+++ b/src/tags.ts
@@ -1,36 +1,31 @@
-import { addAttribute } from './attributes';
-import { type Tags, type Context, type TentNode } from './types';
+import { addAttributes } from './attributes';
+import type { Tags, Context, TentNode } from './types';
 
 function createTag(context: Context) {
   const [tag, children, attributes] = context;
 
   const el = document.createElement(tag) as TentNode;
 
-  el.$tent = {
-    attributes: {},
-  };
-
-  for (const key in attributes) {
-    const value = attributes[key];
-
-    el.$tent.attributes[key] = value;
-
-    addAttribute(el, key, value);
-  }
+  el.$tent = { attributes: {} };
+  addAttributes(el, attributes);
 
   if (Array.isArray(children)) {
-    children.forEach((c) => {
+    for (let i = 0; i < children.length; i++) {
+      const c = children[i];
+
       el.append(Array.isArray(c) ? createTag(c) : c);
-    });
+    }
   } else {
     el.append(typeof children === 'number' ? children.toString() : children);
   }
 
+  attributes?.mounted?.({ el });
+
   return el;
 }
 
 const tags: Tags = {};
-[
+const tagsArray = [
   'div',
   'p',
   'ul',
@@ -76,8 +71,12 @@ const tags: Tags = {};
   'aside',
   'small',
   'b',
-].forEach(
-  (tag) => (tags[tag] = (children, attrs) => createTag([tag, children, attrs])),
-);
+];
+
+for (let i = 0; i < tagsArray.length; i++) {
+  const tag = tagsArray[i];
+
+  tags[tag] = (children, attrs) => createTag([tag, children, attrs]);
+}
 
 export { tags, createTag };
diff --git a/src/types.ts b/src/types.ts
index fc6e146..23f2b9d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,16 +1,14 @@
 type ComponentContext<S, A extends Attrs> = {
   state: S;
   el: TentNode<A>;
-  // @deprecated Use `el.dataset` instead
-  attr: <K extends keyof A>(name: K) => A[K] | undefined;
 };
 
 export type Attrs = {} | undefined;
 export type Component<S extends {} = {}, A extends Attrs = {}> = {
   view: (context: ComponentContext<S, A>) => TentNode<A>;
-  state?: S;
   mounted?: (context: ComponentContext<S, A>) => void;
-};
+} & State<S>;
+type State<S> = {} extends S ? {} : { state: S };
 
 export type TentNode<A extends Attrs = undefined> = Node &
   Element &
@@ -23,9 +21,13 @@ export type TentNode<A extends Attrs = undefined> = Node &
   };
 
 export type Children = string | number | TentNode | (Node | string | Context)[];
-export type Context = [string, Children, object | undefined];
+export type Context = [string, Children, TagAttrs | undefined];
 
+export type TagAttrsValues = string | boolean | number | Function;
+type TagAttrs = Record<string, TagAttrsValues> & {
+  mounted?: ({ el }: { el: TentNode }) => void;
+};
 export type Tags = Record<
   string,
-  (children: Children, attrs?: object) => TentNode
+  (children: Children, attrs?: TagAttrs) => TentNode
 >;
diff --git a/src/walker.ts b/src/walker.ts
index a68a739..f7fe1f6 100644
--- a/src/walker.ts
+++ b/src/walker.ts
@@ -1,15 +1,15 @@
-import { addAttribute } from './attributes';
-import { type Attrs, type TentNode } from './types';
+import { addAttributes } from './attributes';
+import type { Attrs, TentNode } from './types';
 
-function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
+function walker(oldNode: TentNode<Attrs>, newNode: TentNode<Attrs>) {
   if (oldNode.tagName !== newNode.tagName) {
     oldNode.replaceWith(newNode);
 
     return;
   }
 
-  const nc = Array.from(newNode.childNodes, (n) => n as TentNode<A>);
-  const oc = Array.from(oldNode.childNodes, (n) => n as TentNode<A>);
+  const nc = Array.from(newNode.childNodes, (n) => n as TentNode);
+  const oc = Array.from(oldNode.childNodes, (n) => n as TentNode);
 
   if (oldNode.nodeType === Node.TEXT_NODE) {
     if (oldNode.nodeValue !== newNode.nodeValue) {
@@ -19,6 +19,12 @@ function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
     return;
   }
 
+  if (oldNode.$tent == null || newNode.$tent == null) {
+    oldNode.replaceWith(newNode);
+
+    return;
+  }
+
   // Remove attributes that are not present in the new node
   for (const key in oldNode.$tent.attributes) {
     if (newNode.$tent.attributes[key] == null) {
@@ -30,48 +36,41 @@ function walker<A extends Attrs>(oldNode: TentNode<A>, newNode: TentNode<A>) {
   }
 
   // Add attributes that are not present in the old node
-  const attrs = {
+  addAttributes(oldNode, {
     ...oldNode.$tent.attributes,
     ...newNode.$tent.attributes,
-  };
+  });
 
-  for (const key in attrs) {
-    addAttribute(oldNode, key, attrs[key]);
-  }
-
-  if (oc.length === 0 && nc.length === 0) {
-    return;
-  }
+  if (oc.length === 0 && nc.length === 0) return;
 
   if (oc.length < nc.length) {
-    nc.forEach((x, index) => {
-      if (oc[index] == null) {
-        oldNode.append(x);
+    for (let i = 0; i < nc.length; i++) {
+      if (oc[i] == null) {
+        oldNode.append(nc[i]);
       }
-    });
+    }
   }
 
   if (oc.length > nc.length) {
-    oc.forEach((c, i) => {
+    for (let i = 0; i < oc.length; i++) {
       if (nc[i] == null) {
-        c.remove();
+        oc[i].remove();
       }
-    });
+    }
   }
 
-  oc.forEach((oChild, index) => {
-    const nChild = nc[index];
+  for (let i = 0; i < oc.length; i++) {
+    const oChild = oc[i];
+    const nChild = nc[i];
 
-    if (nChild == null) {
-      return;
-    }
+    if (nChild == null) continue;
 
     if (oChild.tagName !== nChild.tagName) {
       oChild.replaceWith(nChild);
     }
 
     walker(oChild, nChild);
-  });
+  }
 }
 
 export { walker };