diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index f1a4ae5..4e4a900 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yoshiki",
-	"version": "1.2.13",
+	"version": "1.2.14",
 	"author": "Zoe Roux <zoe.roux@sdg.moe> (https://github.com/zoriya)",
 	"license": "MIT",
 	"keywords": [
diff --git a/packages/yoshiki/src/native/generator.tsx b/packages/yoshiki/src/native/generator.tsx
index d349835..fae24d4 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -20,10 +20,10 @@ import {
 	processStyleListWithChild,
 	assignChilds,
 } from "../type";
-import { isBreakpoints } from "../utils";
+import { isBreakpoints, useForceRerender } from "../utils";
 import { shorthandsFn } from "../shorthands";
 import { StyleFunc, NativeCssFunc, EnhancedStyle } from "./type";
-import { useReducer, useRef } from "react";
+import { useRef } from "react";
 
 const useBreakpoint = (): number => {
 	const { width } = useWindowDimensions();
@@ -61,10 +61,6 @@ const propertyMapper = (
 	return [[key, value]];
 };
 
-const useForceRerender = () => {
-	return useReducer((x) => x + 1, 0)[1];
-};
-
 type State = EnhancedStyle<ViewStyle | TextStyle | ImageStyle> | undefined;
 
 export const useYoshiki = (_?: string) => {
diff --git a/packages/yoshiki/src/native/generator.web.ts b/packages/yoshiki/src/native/generator.web.ts
index 4bacf35..c7af978 100644
--- a/packages/yoshiki/src/native/generator.web.ts
+++ b/packages/yoshiki/src/native/generator.web.ts
@@ -23,7 +23,7 @@ export const useYoshiki = (prefixKey?: string) => {
 
 	useInsertionEffect(() => {
 		registry.flushToBrowser();
-	}, [registry]);
+	});
 
 	const css: NativeCssFunc = (cssList, leftOvers) => {
 		const [css, parentKeys] = processStyleListWithoutChild(cssList);
diff --git a/packages/yoshiki/src/utils.ts b/packages/yoshiki/src/utils.ts
index ae743c4..f7b26c0 100644
--- a/packages/yoshiki/src/utils.ts
+++ b/packages/yoshiki/src/utils.ts
@@ -3,9 +3,14 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
+import { useReducer } from "react";
 import { breakpoints } from "./theme";
 import { Breakpoints, processStyleList, StyleList, YoshikiStyle } from "./type";
 
+export const useForceRerender = () => {
+	return useReducer((x) => x + 1, 0)[1];
+};
+
 export const isBreakpoints = <T>(value: unknown): value is Breakpoints<T> => {
 	if (typeof value !== "object" || !value) return false;
 	for (const v of Object.keys(value)) {
diff --git a/packages/yoshiki/src/web/generator.ts b/packages/yoshiki/src/web/generator.ts
index d6e903f..26db130 100644
--- a/packages/yoshiki/src/web/generator.ts
+++ b/packages/yoshiki/src/web/generator.ts
@@ -14,7 +14,7 @@ import {
 	processStyleListWithoutChild,
 	WithChild,
 } from "../type";
-import { forceBreakpoint, isBreakpoints } from "../utils";
+import { forceBreakpoint, isBreakpoints, useForceRerender } from "../utils";
 import { StyleRegistry, useStyleRegistry } from "./registry";
 import { shorthandsFn } from "../shorthands";
 
diff --git a/packages/yoshiki/src/web/registry.tsx b/packages/yoshiki/src/web/registry.tsx
index 10dc2e9..7197e15 100644
--- a/packages/yoshiki/src/web/registry.tsx
+++ b/packages/yoshiki/src/web/registry.tsx
@@ -55,6 +55,8 @@ export class StyleRegistry {
 		if (!this.styleElement) {
 			this.hydrate();
 		}
+		// Dont recompute css if no new rules was added.
+		if (!this.rules.length) return;
 
 		const [css] = this.flushToStyleString();