17:["$","section","bb7e4aa8fb1c",{"className":"section space-y-8","children":[["$","header",null,{"className":"richtext","children":[null,[["$","h2","beb15b9cdcfc",{"children":["Articles"]}]]]}],false,["$","$1e",null,{"fallback":["$","ul",null,{"className":"items-stretch gap-x-8 gap-y-12 carousel max-xl:full-bleed md:overflow-fade-r pb-4 [--size:320px] max-xl:px-4","children":[["$","li","0",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","1",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","2",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","3",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","4",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}],["$","li","5",{"children":["$","div",null,{"className":"group flex h-full flex-col space-y-2","href":"/","children":[["$","figure",null,{"className":"relative aspect-video overflow-hidden bg-neutral-50","children":[null,"$undefined"]}],["$","div",null,{"className":"h4 empty:skeleton-2 group-hover:underline","children":"$undefined"}],["$","div",null,{"className":"grow","children":["$","p",null,{"className":"line-clamp-3 text-sm empty:h-[3lh]","children":"$undefined"}]}],["$","dl",null,{"className":"flex flex-wrap items-center gap-4 text-sm","children":["$undefined",["$","div",null,{"className":"flex items-center gap-[.5ch]","children":[["$","dd",null,{"className":"grid aspect-square w-[1.7em] shrink-0 place-content-center overflow-hidden rounded-full bg-neutral-50","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 24 24","className":"text-accent/20 text-xl","children":["$undefined",[["$","path","0",{"d":"M12 2.5a5.5 5.5 0 0 1 3.096 10.047 9.005 9.005 0 0 1 5.9 8.181.75.75 0 1 1-1.499.044 7.5 7.5 0 0 0-14.993 0 .75.75 0 0 1-1.5-.045 9.005 9.005 0 0 1 5.9-8.18A5.5 5.5 0 0 1 12 2.5ZM8 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z","children":[]}]]],"style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","dt",null,{"children":"$undefined"}]]}]]}],["$","hr",null,{}],["$","div",null,{"className":"empty:skeleton flex flex-wrap gap-x-4 text-sm","children":[null,null]}]]}]}]]}],"children":["$","$L1f",null,{"posts":[{"_updatedAt":"2025-02-13T07:13:01Z","_createdAt":"2025-02-12T12:08:10Z","_rev":"1OxznqOhGlfR7mTWzVwrdv","_type":"blog.post","publishDate":"2025-02-12","metadata":{"_type":"metadata","description":"Optimize Redux state management with createEntityAdapter in Redux Toolkit. Simplify CRUD, normalize state, enhance performance with efficient selectors.\n\n\n\n\n\n\n","title":"Mastering Redux Toolkit’s createEntityAdapter","noIndex":false,"slug":{"current":"mastering-redux-toolkit-s-create-entity-adapter","_type":"slug"},"image":{"_type":"image","asset":{"_ref":"image-cfd26f5b771a15051448ebca1c5b1aa4e9ad6e8f-2240x1260-png","_type":"reference"}}},"categories":[{"_rev":"UR1wkHm7gXQ1LoZmN7Eo42","_type":"blog.category","_id":"0ae64172-fd6a-40f8-af65-51fad7a14f35","title":"Front End Web Development","_updatedAt":"2025-02-08T17:42:39Z","slug":{"current":"front-end-web-development","_type":"slug"},"_createdAt":"2025-02-08T17:42:38Z"}],"_id":"9825aa08-e60e-4cab-bfb1-19786bbe46e6","body":[{"_type":"block","style":"normal","_key":"2de918076137","markDefs":[],"children":[{"text":"Managing and updating data in modern web applications can become complex. Redux Toolkit offers many helpful tools to reduce this complexity. One of these tools, createEntityAdapter, generates ready-made reducer functions and selectors that keep data in a normalized structure and make CRUD (Create, Read, Update, Delete) operations easy. In this article, we will examine what createEntityAdapter does, how it is used and how you can apply it with examples.","_key":"5444ed41d79a","_type":"span","marks":[]}]},{"_key":"1efe5de8df67","markDefs":[],"children":[{"_type":"span","marks":[],"text":"What is createEntityAdapter?","_key":"628a3a38a8e8"}],"_type":"block","style":"h2"},{"markDefs":[],"children":[{"text":"createEntityAdapter","_key":"8d3be1d34220","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":" is designed to perform state management of certain data types (e.g. User, Post, Comment) in an application with a normalized structure. The normalized state structure is usually in the following format:","_key":"16ee2951762a"}],"_type":"block","style":"normal","_key":"c74b0542551f"},{"code":"{\n // Array containing all unique IDs\n ids: [],\n // Lookup table matching each entity by its ID\n entities: {}\n}\n","_type":"code","language":"javascript","_key":"7f9faae2f77a"},{"_key":"88ab41953de1","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Thanks to this structure, accessing, updating or deleting a given entity becomes much faster and more efficient.\n","_key":"ecd3edf2275b"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"In addition to creating this structure, Redux Toolkit's createEntityAdapter provides ready-made methods to perform the following CRUD operations:\n","_key":"6df9c2629232"}],"_type":"block","style":"normal","_key":"2c0023268097"},{"level":1,"_type":"block","style":"normal","_key":"a905d2a9be74","listItem":"bullet","markDefs":[],"children":[{"text":"addOne / addMany:","_key":"0967a62de5b7","_type":"span","marks":["strong"]},{"_key":"6931d5513eb3","_type":"span","marks":[],"text":" Adds new entities, does not modify existing ones."}]},{"_key":"840a61ddc975","listItem":"bullet","markDefs":[],"children":[{"marks":["strong"],"text":"setOne / setMany:","_key":"2fa31fdc6ca4","_type":"span"},{"_type":"span","marks":[],"text":" Replaces existing entities with completely new data.","_key":"6b5250f7a4fe"}],"level":1,"_type":"block","style":"normal"},{"style":"normal","_key":"e22459143623","listItem":"bullet","markDefs":[],"children":[{"marks":["strong"],"text":"upsertOne / upsertMany:","_key":"41bd4a66f1a1","_type":"span"},{"_type":"span","marks":[],"text":" Updates existing entities or adds new ones (with shallow merge).","_key":"3f67eba01164"}],"level":1,"_type":"block"},{"children":[{"_type":"span","marks":["strong"],"text":"setAll: ","_key":"6eeb97499ca6"},{"_type":"span","marks":[],"text":"Removes all existing entities and recreates the state with new data.","_key":"0e63048f6885"}],"level":1,"_type":"block","style":"normal","_key":"48a59fe729ce","listItem":"bullet","markDefs":[]},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"removeOne / removeMany / removeAll:","_key":"5d281a927d1b"},{"_type":"span","marks":[],"text":" Removes specified entities or all of them from the state.","_key":"cfcbf7eabc3a"}],"level":1,"_type":"block","style":"normal","_key":"0116f46ecb2d"},{"_key":"f1074db7abad","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"updateOne / updateMany:","_key":"d032a14b507d"},{"_type":"span","marks":[],"text":" Updates specific fields in existing entities.","_key":"4b48241a2418"}],"level":1,"_type":"block","style":"normal"},{"style":"normal","_key":"1de5470573c7","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Also, the getSelectors function included with the adapter generates memoized selectors to read the entity state.","_key":"1e6b80747abc"}],"level":1,"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Basic Concepts","_key":"b38608ec3251"}],"_type":"block","style":"h2","_key":"59a44adbc1a0"},{"style":"h3","_key":"381865992570","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Entity and Normalized State","_key":"caa1e3d45a07"}],"_type":"block"},{"style":"normal","_key":"b2fc476cabd7","markDefs":[],"children":[{"_key":"5c4810db621a","_type":"span","marks":[],"text":"In an application, the term “Entity” refers to a specific data type. For example, in a blog application, User, Post and Comment data types can be considered as entities. Each entity is expected to have a unique ID. Normalizing the state in this way enables fast operations on the data and avoids unnecessary data duplication.\n"}],"_type":"block"},{"style":"h3","_key":"e88e2a080d33","markDefs":[],"children":[{"marks":[],"text":"selectId and sortComparer","_key":"aaec00d6dc59","_type":"span"}],"_type":"block"},{"markDefs":[],"children":[{"_key":"2963a82565f1","_type":"span","marks":[],"text":"createEntityAdapter uses the selectId function to specify the unique ID field in data objects. By default entity.id is used, but you can define a custom function if your data structure is different."}],"_type":"block","style":"normal","_key":"27bb63763b0b"},{"markDefs":[],"children":[{"text":"","_key":"035c05e32e0c","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"767994981c7f"},{"style":"normal","_key":"06c26a81571c","markDefs":[],"children":[{"text":"You can also use the sortComparer function to keep the ids array sorted. For example, localeCompare can be used to sort books by title.\n","_key":"6628e690dde3","_type":"span","marks":[]}],"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"Using Adapters with Small Examples","_key":"9d0a0890fcdf"}],"_type":"block","style":"h2","_key":"9e71566943cc","markDefs":[]},{"children":[{"text":"","_key":"11deedeb5f80","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"8cdaf459c54c","markDefs":[]},{"_type":"block","style":"h3","_key":"eafcde691be3","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Example 1: Creating a Simple Entity Adapter","_key":"4de4855720ee"}]},{"markDefs":[],"children":[{"marks":[],"text":"The following example creates an adapter that uses the default ID field id and sorts books by their titles:\n\n","_key":"95ca13398d7e","_type":"span"}],"_type":"block","style":"normal","_key":"abe679aadaa8"},{"_key":"029024354d69","code":"import { createEntityAdapter } from '@reduxjs/toolkit'\n\ntype Book = { id: string; title: string }\n\nconst booksAdapter = createEntityAdapter({\n // Let's sort the books according to their titles\n sortComparer: (a, b) => a.title.localeCompare(b.title),\n})\n\n// Create initial state\nconst initialState = booksAdapter.getInitialState()\n\nconsole.log(initialState)\n// Output: { ids: [], entities: {} }","_type":"code","language":"javascript"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"In this example, we initially create an empty state using the booksAdapter. The adapter prepares the normalized structure of the state before adding the books.","_key":"775249619065"}],"_type":"block","style":"normal","_key":"21f9a1180a79"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"d14b83dbe68d"}],"_type":"block","style":"normal","_key":"7afc5c4a46de"},{"_type":"block","style":"h3","_key":"6d564f91d6c8","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Example 2: Using addOne and updateOne ","_key":"9e1a282d3f9e"}]},{"children":[{"_type":"span","marks":[],"text":"","_key":"a1d8477ad1ee"}],"_type":"block","style":"normal","_key":"2f8991982711","markDefs":[]},{"children":[{"_type":"span","marks":[],"text":"The following example shows how adapter's addOne and updateOne functions work:","_key":"419421b1ef9a"}],"_type":"block","style":"normal","_key":"3121d4b09d75","markDefs":[]},{"code":"import { createEntityAdapter } from '@reduxjs/toolkit'\n\ntype Product = { id: string; name: string; price: number }\nconst productsAdapter = createEntityAdapter()\n\n// Initial state\nlet state = productsAdapter.getInitialState()\n\n// Let's add a product\nstate = productsAdapter.addOne(state, { id: 'p1', name: 'Laptop', price: 1200 })\nconsole.log(state)\n// Output: { ids: ['p1'], entities: { p1: { id: 'p1', name: 'Laptop', price: 1200 } } }\n\n// Let's update the product\nstate = productsAdapter.updateOne(state, { id: 'p1', changes: { price: 1100 } })\nconsole.log(state)\n// Output: { ids: ['p1'], entities: { p1: { id: 'p1', name: 'Laptop', price: 1100 } } }\n","_type":"code","language":"javascript","_key":"de731baef067"},{"style":"normal","_key":"248803638d5a","markDefs":[],"children":[{"_key":"b8f405d185b5","_type":"span","marks":[],"text":"Here, a product is added first, then updateOne is used to update the price information."}],"_type":"block"},{"_type":"block","style":"normal","_key":"0e52175ee27a","markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"7a94abce4a1e"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Example 3: Book Management with Redux Toolkit","_key":"7c32a7992f22"}],"_type":"block","style":"h3","_key":"7d8b8fd95cb2"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"737766cf78b0"}],"_type":"block","style":"normal","_key":"b221c1d0792d"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Now let's look at a more detailed example where we will create a full-fledged Redux slice using createEntityAdapter. In this example, we will create a structure that adds, updates, deletes and sorts books.","_key":"3f6d3e449a5e"}],"_type":"block","style":"normal","_key":"9d34e6de1be4"},{"code":"$20","_type":"code","language":"javascript","_key":"3b295c23d623"},{"style":"normal","_key":"7e6ea784f74a","markDefs":[],"children":[{"text":"Adapter Definition:","_key":"b7a5fde25dfa","_type":"span","marks":["strong"]}],"_type":"block"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"selectId function sets bookId as the unique ID field of books.","_key":"6f36b62e8055"}],"level":1,"_type":"block","style":"normal","_key":"229f477c0498"},{"children":[{"_type":"span","marks":[],"text":"sortComparer function keeps the ids array organized by sorting books by title.","_key":"c53314eea7e9"}],"level":1,"_type":"block","style":"normal","_key":"1565dd3ffc2a","listItem":"bullet","markDefs":[]},{"children":[{"_type":"span","marks":["strong"],"text":"Slice and Reducers:","_key":"21b100922066"}],"_type":"block","style":"normal","_key":"acd2ef09e33e","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"271dedeb508d","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"bookAdded adds a single book,","_key":"ef7c6164988e"}]},{"children":[{"_type":"span","marks":[],"text":"booksReceived sets the incoming book list to state (deleting previous books),","_key":"6547fc6af6ae"}],"level":1,"_type":"block","style":"normal","_key":"6940c8ee460c","listItem":"bullet","markDefs":[]},{"_type":"block","style":"normal","_key":"ea65978890b9","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"bookUpdated updates an existing book.","_key":"a9102f040f69"}],"level":1},{"style":"normal","_key":"01399c973fd9","listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"In addition, the booksLoading reducer manages the loading state.","_key":"1d5e8aea7ea2","_type":"span"}],"level":1,"_type":"block"},{"markDefs":[],"children":[{"marks":["strong"],"text":"Store and Selector Usage:","_key":"7e39617ca097","_type":"span"}],"_type":"block","style":"normal","_key":"f5bee2705572"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"When configuring the Redux store, the books state was created using booksSlice.reducer. Thanks to the selectors created with getSelectors, it is easier to access the entities in the state. ❤️","_key":"7c17717331d2"}],"_type":"block","style":"normal","_key":"6f72bfb75c98"},{"style":"normal","_key":"1578f23638b2","markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"846930bcccee"}],"_type":"block"},{"style":"normal","_key":"467c32408441","markDefs":[],"children":[{"text":"This detailed example shows how normalized state management can be done in a simple and effective way with the functions provided by createEntityAdapter.\n","_key":"d52b539ee82d","_type":"span","marks":[]}],"_type":"block"},{"_key":"84058f02e066","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Conclusion","_key":"8ebf5753f36c"}],"_type":"block","style":"h2"},{"_type":"block","style":"normal","_key":"46f12555fbbc","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Redux Toolkit's createEntityAdapter is an ideal solution for normalizing state and simplifying CRUD operations when working with large and complex datasets. You can both learn the basics with small examples and apply it in your own projects by studying the detailed example above. Using this structure, it is possible to create cleaner, more readable and performant Redux logic.","_key":"8928a0be26a4"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"0ca1153f6fa2"}],"_type":"block","style":"normal","_key":"f0787d9ef1a6"},{"_type":"block","style":"normal","_key":"de5d0cec40bc","markDefs":[{"_type":"link","href":"https://redux-toolkit.js.org/api/createEntityAdapter","_key":"a4f114479136"}],"children":[{"_type":"span","marks":[],"text":"For more information about the Redux Toolkit and createEntityAdapter, check out the ","_key":"bc6f7dcabe89"},{"_type":"span","marks":["a4f114479136"],"text":"official documentation.","_key":"ec09d4a61108"},{"_key":"b34697bdf2f9","_type":"span","marks":[],"text":"\n"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Happy coding! 👨🏻‍💻","_key":"9d3c2b337e2b"}],"_type":"block","style":"normal","_key":"39e3660f49f3"}],"authors":[{"_updatedAt":"2025-02-08T17:45:37Z","image":{"_type":"image","asset":{"_ref":"image-ecbce85c332d96e23de2dbfd560c3c20e91cf454-460x460-jpg","_type":"reference"}},"_createdAt":"2025-02-08T17:42:07Z","_rev":"UR1wkHm7gXQ1LoZmN7Et6D","_type":"person","name":"Kagan Mert","_id":"280554de-536a-4676-89b3-fb80b3dd28ac"}],"featured":false,"hideTableOfContents":false},{"_rev":"3k50p60fTIbtBaoyVXyWfh","_type":"blog.post","publishDate":"2024-09-01","_updatedAt":"2025-02-13T11:45:46Z","hideTableOfContents":false,"body":[{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Signals are a powerful data type shaping the future of ","_key":"700d764a4594"},{"text":"reactive programming","_key":"af1a2ae5fa32","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":" in JavaScript. At its core, a Signal represents a value that can change over time and automatically manages calculations dependent on these changes. Signals provide a mechanism that enables unidirectional data flow, simplifies state management, and enhances application performance.","_key":"73eba2c1ea08"}],"_type":"block","style":"normal","_key":"347cbdaac0b2"},{"markDefs":[{"_type":"link","href":"https://github.com/tc39/proposal-signals","_key":"51abc748b3c8"}],"children":[{"_type":"span","marks":[],"text":"The role of Signals in reactive programming is critical for creating dynamic user interfaces. By simplifying complex state management, Signals allow developers to focus on business logic. They automate challenging tasks such as storing values, performing calculations, invalidating, and efficiently communicating to the view layer.\n\nThe historical development of Signals began with Knockout.js in 2010 and has since been adopted and developed by various JavaScript frameworks. In recent years, almost all modern JavaScript libraries and frameworks include Signal-like structures in some form. This widespread use has accelerated the standardization process of Signals, leading to a proposal in ","_key":"a7c977c9f4bf"},{"marks":["51abc748b3c8"],"text":"TC39","_key":"a22f23437051","_type":"span"},{"_key":"2b688f2a455b","_type":"span","marks":[],"text":".\n"}],"_type":"block","style":"normal","_key":"cca7a731aaca"},{"_key":"d1290d03cc88","asset":{"_ref":"image-c5169dd6c69b2da23809ccbd012baed7e11fcfbf-478x168-webp","_type":"reference"},"loading":"lazy","_type":"image","caption":"Knockout.JS was released on July 5, 2010.\n"},{"style":"normal","_key":"1e36f2b4d830","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Let's understand this concept through a simple counter example, comparing vanilla JavaScript with a Signal-based approach:\n","_key":"cfbacc326dd1"}],"_type":"block"},{"_key":"3ee49ce31e31","markDefs":[],"children":[{"_type":"span","marks":[],"text":"A counter implementation in vanilla JavaScript","_key":"2f15225b4d78"}],"_type":"block","style":"h2"},{"code":"let counter = 0;\nconst setCounter = (value) => {\n counter = value;\n render();\n};\nconst isEven = () => (counter & 1) == 0;\nconst oddEven = () => isEven() ? \"even\" : \"odd\";\nconst render = () => element.innerText = oddEven();\nsetInterval(() => setCounter(counter + 1), 1000);","_type":"code","language":"javascript","_key":"a184f8ce06ab"},{"style":"normal","_key":"953b154594ef","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"This approach has several problems:","_key":"49b60b05a8db"}],"_type":"block"},{"children":[{"_type":"span","marks":["strong"],"text":"Complex Setup:","_key":"1080b8e2bd90"},{"_type":"span","marks":[],"text":" The counter setup leads to unnecessary code clutter and repetition.","_key":"2f4a2881439f"}],"level":1,"_type":"block","style":"normal","_key":"1d3d395f3dc7","listItem":"bullet","markDefs":[]},{"_key":"df635de34cab","listItem":"bullet","markDefs":[],"children":[{"_key":"7b6ab2a5de04","_type":"span","marks":["strong"],"text":"Tight Coupling:"},{"_type":"span","marks":[],"text":" The counter state is tightly coupled with the render system.","_key":"4fb19543ce0e"}],"level":1,"_type":"block","style":"normal"},{"level":1,"_type":"block","style":"normal","_key":"90b26f3de0ce","listItem":"bullet","markDefs":[],"children":[{"marks":["strong"],"text":"Unnecessary Calculations:","_key":"01caae6a9f8d","_type":"span"},{"marks":[],"text":" Calculations and renders occur even when the result doesn't change.","_key":"f557f99b16a4","_type":"span"}]},{"level":1,"_type":"block","style":"normal","_key":"41f9e09a08b1","listItem":"bullet","markDefs":[],"children":[{"_key":"0ac0273e6eb3","_type":"span","marks":["strong"],"text":"Difficult Independent Updates:"},{"text":" Managing updates for different UI parts is challenging.","_key":"2a66a2fc55ed","_type":"span","marks":[]}]},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Problematic Independent Dependencies:","_key":"4afaab043609"},{"text":" Parts of the UI directly interacting with the counter, even if they only depend on derived values.\n","_key":"332ef394ab04","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"fc26e4a015bd"},{"_key":"7f70a6db6390","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Signal-based Counter Example","_key":"875dd2f6e11f"}],"_type":"block","style":"h2"},{"language":"javascript","_key":"0649fa00d39c","code":"const counter = new Signal.State(0);\nconst isEven = new Signal.Computed(() => (counter.get() & 1) == 0);\nconst parity = new Signal.Computed(() => isEven.get() ? \"even\" : \"odd\");\n// A library or framework defines effects based on other Signal primitives\ndeclare function effect(cb: () => void): (() => void);\neffect(() => element.innerText = parity.get());\n// Simulate external updates to counter...\nsetInterval(() => counter.set(counter.get() + 1), 1000);","_type":"code"},{"_key":"b7bff22aadee","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\n","_key":"e3a670a4fe08"},{"marks":["strong"],"text":"Key advantages of the Signal-based approach:","_key":"cac3c02425ed","_type":"span"}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"fb17cd84077c","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Simplified Code:","_key":"6fd47e72b971"},{"_type":"span","marks":[],"text":" Eliminates complex code structures around the counter variable.","_key":"b5727a90d2eb"}],"level":1},{"listItem":"bullet","markDefs":[],"children":[{"text":"Unified API:","_key":"bf93032d3d43","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":" Uses a unified API for managing values, calculations, and side effects.","_key":"9cc4affa4591"}],"level":1,"_type":"block","style":"normal","_key":"6897858201b9"},{"style":"normal","_key":"33599ff71b27","listItem":"bullet","markDefs":[],"children":[{"text":"No Circular References:","_key":"d383fa43a41e","_type":"span","marks":["strong"]},{"_type":"span","marks":[],"text":" Avoids cyclical reference problems between the counter and render process.","_key":"8a529f5181fb"}],"level":1,"_type":"block"},{"level":1,"_type":"block","style":"normal","_key":"94e3d32336d7","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Automatic Subscription Management:","_key":"74a4f9363e82"},{"_key":"6ec8b26a9674","_type":"span","marks":[],"text":" No need for manual subscriptions or complex state tracking.• "},{"marks":["strong"],"text":"Control Over Side Effects:","_key":"451ccfc50d39","_type":"span"},{"_type":"span","marks":[],"text":" Provides control over the timing and scheduling of side effects.","_key":"b0459bf9d39a"}]},{"_key":"383fc4ef357c","markDefs":[],"children":[{"_key":"21b0dec887cd","_type":"span","marks":["strong"],"text":"Signals offer more than what's apparent on the surface of the API:"}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"6bb664da7c7a","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Automatic Dependency Tracking:","_key":"d32f5484f089"},{"_type":"span","marks":[],"text":" Computed Signals automatically discover their dependencies.","_key":"913a874ccff4"}],"level":1},{"level":1,"_type":"block","style":"normal","_key":"af6a716e0457","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Lazy Evaluation:","_key":"dde13f8964e6"},{"_type":"span","marks":[],"text":" Calculations are only performed when their values are explicitly requested.","_key":"dfab265e009a"}]},{"_key":"38ea1ff60b3d","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Memoization:","_key":"0bd0b8b78ffa"},{"_key":"b5bf5d367f57","_type":"span","marks":[],"text":" Computed Signals cache their last values, avoiding unnecessary recalculations."}],"level":1,"_type":"block","style":"normal"},{"style":"h2","_key":"5f75ceb37029","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Signal's Working Principles ","_key":"47f3f961d4cf"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Push-Pull Model","_key":"00ae211407ea"}],"_type":"block","style":"h3","_key":"ca7ef467688e"},{"_key":"6154a6aa9adf","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The Signal system uses a combination of push and pull mechanisms, making it highly efficient.","_key":"28c6f3d429b1"}],"_type":"block","style":"normal"},{"_key":"d75ba6dbb4fe","markDefs":[],"children":[{"marks":[],"text":"Push Mechanism","_key":"06ca404035dc","_type":"span"}],"_type":"block","style":"h3"},{"_type":"block","style":"normal","_key":"70b79905063e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"When the value of a State Signal changes, this change is \"pushed\" to dependent Computed Signals and Effects.","_key":"cc3041787015"}]},{"_type":"block","style":"normal","_key":"2d8bc451f86c","markDefs":[],"children":[{"_type":"span","marks":[],"text":"This ensures that dependent elements are aware of the change.","_key":"3f0e0c3e876d"}]},{"style":"h3","_key":"582b8a5283b1","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Pull Mechanism","_key":"941e551d1242"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Computed Signals are not recalculated until their values are read.","_key":"275f4c337f30"}],"_type":"block","style":"normal","_key":"d66e208187ee"},{"markDefs":[],"children":[{"text":"When a value is requested, the current value is \"pulled\".","_key":"46a65ef08223","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"49ac20904f4b"},{"style":"h4","_key":"a75c93408f34","markDefs":[],"children":[{"marks":[],"text":"How It Works","_key":"dc608549282a","_type":"span"}],"_type":"block"},{"_key":"b12e7996c662","markDefs":[],"children":[{"marks":[],"text":"When a State Signal changes, dependent Computed Signals are marked as \"dirty\".","_key":"826a8fa983b7","_type":"span"}],"_type":"block","style":"normal"},{"children":[{"_type":"span","marks":[],"text":"Effects are triggered immediately (push).","_key":"c4d6db7f8636"}],"_type":"block","style":"normal","_key":"16f6a47c5241","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Computed Signals are not recalculated until their values are read (lazy pull).","_key":"302c76c9b075"}],"_type":"block","style":"normal","_key":"674d46463847"},{"children":[{"_type":"span","marks":[],"text":"This model prevents unnecessary calculations and efficiently uses system resources.","_key":"730dd2956e9f"}],"_type":"block","style":"normal","_key":"c8a19d789140","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Lazy Evaluation","_key":"5e73e7d1b80e"}],"_type":"block","style":"h4","_key":"54a93ac52667"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Lazy Evaluation is the foundation of how Computed Signals work.","_key":"2a5c83cc98a2"}],"_type":"block","style":"normal","_key":"30f165b1673e"},{"_key":"6999e3ea241b","markDefs":[],"children":[{"text":"Properties:","_key":"e35f5e181c53","_type":"span","marks":["strong"]}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Computed Signals are not calculated until their values are actually needed.","_key":"953d83055e57"}],"_type":"block","style":"normal","_key":"ec6d9bcd2df9"},{"_key":"40469a6a7c5a","markDefs":[],"children":[{"marks":[],"text":"Calculation occurs when the value is read (for example, when .get() is called).","_key":"7153174f738a","_type":"span"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"text":"Advantages:","_key":"71cdf541dc78","_type":"span","marks":["strong"]}],"_type":"block","style":"normal","_key":"f7906a52a6e9"},{"style":"normal","_key":"dabae9d1df73","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Prevents unnecessary calculations.","_key":"9b0e3e34ce0d"}],"level":1,"_type":"block"},{"style":"normal","_key":"89f309fc852f","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Conserves system resources.","_key":"e2a2ee27bdf2"}],"level":1,"_type":"block"},{"style":"normal","_key":"12b2a25d1421","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Particularly useful in complex, nested calculations.","_key":"f6711570a890"}],"level":1,"_type":"block"},{"code":"const a = new Signal.State(5);\nconst b = new Signal.State(10);\nconst sum = new Signal.Computed(() => a.get() + b.get());\na.set(7); // sum is not recalculated yet\nconsole.log(sum.get()); // Now it's calculated and returns 17","_type":"code","language":"javascript","_key":"7eac684dbccf"},{"_key":"7431b5e927da","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Glitch-free Execution","_key":"5b2798a839ac"}],"_type":"block","style":"h3"},{"_type":"block","style":"normal","_key":"0fc6de44c08b","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Glitch-free execution guarantees that the Signal system maintains a consistent state.","_key":"72b4e571e6b7"}]},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"What Does It Mean?","_key":"be77dfe942a8"}],"_type":"block","style":"normal","_key":"f221ab55642a"},{"markDefs":[],"children":[{"_key":"45ae563b1ea9","_type":"span","marks":[],"text":"The system always remains in a consistent state."}],"_type":"block","style":"normal","_key":"292805f3f24e"},{"_type":"block","style":"normal","_key":"43a2a4eb90ef","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Intermediate values or temporary inconsistent states are not observed.","_key":"f5cb229c316b"}]},{"markDefs":[],"children":[{"marks":["strong"],"text":"How Is It Achieved?","_key":"26e16aeba227","_type":"span"}],"_type":"block","style":"normal","_key":"0d371878f9a9"},{"style":"normal","_key":"957c8cfbcb52","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Topological Sorting:","_key":"3f04c15aebb5"},{"_type":"span","marks":[],"text":" The dependency graph ensures updates are made in the correct order.","_key":"ee712c6dbd1f"}],"_type":"block"},{"_key":"ec53f52721b5","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Batch Updates:","_key":"fbcf851ebdaa"},{"_type":"span","marks":[],"text":" Changes are applied in batches.\n","_key":"3345f818a461"}],"_type":"block","style":"normal"},{"language":"javascript","_key":"0a046cb047fa","code":"const a = new Signal.State(1);\nconst b = new Signal.Computed(() => a.get() * 2);\nconst c = new Signal.Computed(() => a.get() + b.get());\na.set(2);\nconsole.log(c.get()); // Always returns 6, never an intermediate value like 5 (1 + 4)","_type":"code"},{"children":[{"_type":"span","marks":[],"text":"Memoization","_key":"7967d8471605"}],"_type":"block","style":"h3","_key":"f968295db41b","markDefs":[]},{"_key":"e119ad07bc64","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Memoization is the caching of computation results and prevention of unnecessary recalculations.","_key":"c6bf94a4cc14"}],"_type":"block","style":"normal"},{"children":[{"_type":"span","marks":[],"text":"How It Works:","_key":"1f3ce51f125e"}],"_type":"block","style":"h5","_key":"fd5344c2ea6d","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"badfee20c76b","listItem":"bullet","markDefs":[],"children":[{"_key":"e78e9850211e","_type":"span","marks":[],"text":"When a Computed Signal is calculated, the result is cached."}]},{"markDefs":[],"children":[{"marks":[],"text":"As long as dependencies don't change, subsequent reads use the cache.","_key":"5e3066b8f63a","_type":"span"}],"level":1,"_type":"block","style":"normal","_key":"6c6637260d11","listItem":"bullet"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"If any dependency changes, the cache is invalidated, and recalculation occurs.","_key":"d7b718453517"}],"level":1,"_type":"block","style":"normal","_key":"b2a78efb7e96"},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Advantages:","_key":"578b046f5a53"}],"_type":"block","style":"h5","_key":"bdad52ee35e8"},{"children":[{"_type":"span","marks":[],"text":"Provides performance improvement.","_key":"46261c34dd11"}],"level":1,"_type":"block","style":"normal","_key":"bb425c62e812","listItem":"bullet","markDefs":[]},{"markDefs":[],"children":[{"_key":"a65dca2e126c","_type":"span","marks":[],"text":"Especially useful for costly calculations."}],"level":1,"_type":"block","style":"normal","_key":"5c309bbfb470","listItem":"bullet"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Conserves system resources.","_key":"79bbfdd2f0ab"}],"level":1,"_type":"block","style":"normal","_key":"a3d274b5e291","listItem":"bullet"},{"code":"const heavyComputation = new Signal.Computed(() => {\n console.log(\"Calculating...\");\n return expensiveFunction(a.get(), b.get());\n});\nconsole.log(heavyComputation.get()); // Prints \"Calculating...\" and returns the result\nconsole.log(heavyComputation.get()); // Only returns the result, doesn't recalculate\na.set(newValue); // Dependency changed\nconsole.log(heavyComputation.get()); // Prints \"Calculating...\" again and returns the new result","_type":"code","language":"javascript","_key":"8874ee4af377"},{"style":"normal","_key":"f89dfe7dea2b","markDefs":[],"children":[{"_key":"dc2882074ee7","_type":"span","marks":[],"text":""}],"_type":"block"}],"metadata":{"image":{"_type":"image","asset":{"_ref":"image-677da46907a9f6db5e40e86956826c92801ba79c-2240x1260-png","_type":"reference"}},"_type":"metadata","description":"Signals simplify state management in JavaScript by enabling reactive updates with efficient dependency tracking, lazy evaluation, and glitch-free execution.","title":"Signals: The Future of Reactive Programming in JavaScript","noIndex":false,"slug":{"current":"signals-the-future-of-reactive-programming-in-javascript","_type":"slug"}},"_id":"257995c3-d1b4-4883-b645-2c6fbe327594","authors":[{"image":{"_type":"image","asset":{"_ref":"image-ecbce85c332d96e23de2dbfd560c3c20e91cf454-460x460-jpg","_type":"reference"}},"_createdAt":"2025-02-08T17:42:07Z","_rev":"UR1wkHm7gXQ1LoZmN7Et6D","_type":"person","name":"Kagan Mert","_id":"280554de-536a-4676-89b3-fb80b3dd28ac","_updatedAt":"2025-02-08T17:45:37Z"}],"featured":false,"_createdAt":"2025-02-08T18:03:17Z","categories":[{"_createdAt":"2025-02-08T17:42:38Z","_rev":"UR1wkHm7gXQ1LoZmN7Eo42","_type":"blog.category","_id":"0ae64172-fd6a-40f8-af65-51fad7a14f35","title":"Front End Web Development","_updatedAt":"2025-02-08T17:42:39Z","slug":{"current":"front-end-web-development","_type":"slug"}}]},{"hideTableOfContents":false,"metadata":{"image":{"_type":"image","asset":{"_ref":"image-c70c09703b21f5d8f5c3b78de8614809f7e5328a-2240x1260-png","_type":"reference"}},"_type":"metadata","description":"SVG sprites in Next.js optimize icons by reducing HTTP requests. Sly-cli automates adding and managing icons, improving performance and efficiency.\n\n\n\n\n\n\n\n","title":"Using SVG Sprites with NextJS 14","noIndex":false,"slug":{"current":"using-svg-sprites-with-nextjs-14","_type":"slug"}},"_rev":"1OxznqOhGlfR7mTWzYR1WJ","_createdAt":"2025-02-08T18:11:07Z","_type":"blog.post","publishDate":"2024-08-28","_id":"ba8d5757-27b1-4545-81f5-f0076bf3b161","authors":[{"_createdAt":"2025-02-08T17:42:07Z","_rev":"UR1wkHm7gXQ1LoZmN7Et6D","_type":"person","name":"Kagan Mert","_id":"280554de-536a-4676-89b3-fb80b3dd28ac","_updatedAt":"2025-02-08T17:45:37Z","image":{"_type":"image","asset":{"_ref":"image-ecbce85c332d96e23de2dbfd560c3c20e91cf454-460x460-jpg","_type":"reference"}}}],"body":[{"_key":"af1346865b7e","markDefs":[],"children":[{"_key":"3d6c2f3ee59c","_type":"span","marks":["strong"],"text":"SVG sprites"},{"_type":"span","marks":[],"text":" are a powerful tool for optimizing icon usage in frontend development. By consolidating multiple icons into a single file, they significantly reduce the number of HTTP requests, leading to faster page loads. Unlike importing SVGs as JSX components, which can bloat JavaScript bundles and impact runtime performance, sprites offer a more efficient solution. This approach is particularly beneficial for large-scale applications where icon usage is extensive, potentially saving hundreds of kilobytes in bundle size. Implementing SVG sprites can greatly enhance overall application performance and user experience.","_key":"5d5c98051a57"}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"e9bb79fb696d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"cc109da95725"}]},{"_type":"block","style":"normal","_key":"927f8462fa5d","markDefs":[],"children":[{"_key":"de248eea58ac","_type":"span","marks":[],"text":"Using SVG Sprites to render icons is a highly effective method for performance optimization. This technique consolidates all icons into a single SVG file, defining each icon within a element. Here's a simple explanation of how it works:"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"First, create a file named sprite.svg and add all icons as elements within it.","_key":"a7c8744c0f70"}],"level":1,"_type":"block","style":"normal","_key":"b46837565658","listItem":"bullet"},{"markDefs":[],"children":[{"_key":"360b50decd2c","_type":"span","marks":[],"text":"Assign a unique id to each ."}],"level":1,"_type":"block","style":"normal","_key":"b4e2bb673647","listItem":"bullet"},{"children":[{"_key":"901677e7b7e4","_type":"span","marks":[],"text":"In React, create an Icon component that references this sprite."}],"level":1,"_type":"block","style":"normal","_key":"d7b603759cfc","listItem":"bullet","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"a8c6d03a30fe","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The Icon component uses the element to call a specific icon from the sprite by its id.","_key":"b7eec3005743"}]},{"markDefs":[],"children":[{"_key":"dfaae296f927","_type":"span","marks":[],"text":"This method keeps all icon data out of the JavaScript bundle while maintaining the advantages of inline SVGs, thus reducing bundle size."}],"level":1,"_type":"block","style":"normal","_key":"c58bd0205bdb","listItem":"bullet"},{"style":"normal","_key":"050f4c73077b","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"This approach allows for efficient management and use of numerous icons while improving page load performance.","_key":"26c2629bd628"}],"_type":"block"},{"children":[{"marks":[],"text":"If you're ready, let's implement the approach described on ","_key":"239952726718","_type":"span"},{"marks":["886df04161d4"],"text":"James Blog","_key":"d74180a8935d","_type":"span"},{"marks":[],"text":":\n","_key":"45b4128b99e2","_type":"span"}],"_type":"block","style":"normal","_key":"6b54842226ec","markDefs":[{"_type":"link","href":"https://www.jamesshopland.com/blog/nextjs-svg-sprites:","_key":"886df04161d4"}]},{"_key":"98e180f4b7ce","markDefs":[],"children":[{"text":"Creating an Icon Storage Folder","_key":"bb42946bbf3c","_type":"span","marks":[]}],"_type":"block","style":"h2"},{"style":"normal","_key":"33c3c256bd1a","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Start by creating a dedicated folder in your Next.js project root to store your SVG icons. Name this folder /other/svg. This central location will house all your SVG files.","_key":"dd855b5cb2fa"}],"_type":"block"},{"markDefs":[],"children":[{"text":"For better organization, especially when using multiple icon libraries, create subfolders within /other/svg. For instance, you might have /other/svg/lucide for Lucide icons, /other/svg/radix for Radix icons, and so on.","_key":"52e13020b70c","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"7c1eb2c5bafa"},{"markDefs":[],"children":[{"text":"Adding Icons Manually","_key":"8f06fd1f68b1","_type":"span","marks":["strong"]}],"_type":"block","style":"h3","_key":"e9220c125cb5"},{"style":"normal","_key":"381c1fc4aa5d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"You can manually add icons by copying the SVG code into individual .svg files within the appropriate subfolder. However, this process can be time-consuming and error-prone for large icon sets.","_key":"dc2d085bed91"}],"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"Automating Icon Addition with Sly-cli","_key":"23a4aa1ca3d0"}],"_type":"block","style":"normal","_key":"26d8747ce714","markDefs":[]},{"markDefs":[],"children":[{"_key":"85568bf516dd","_type":"span","marks":[],"text":"To streamline the process of adding icons, we'll use a tool called Sly-cli. This utility allows you to extract SVG files from popular React icon libraries without including unnecessary React-specific code."}],"_type":"block","style":"normal","_key":"ecc8855d7eef"},{"children":[{"_key":"211aed453353","_type":"span","marks":[],"text":"Sly-cli adds the raw SVG code from dependencies without importing the entire library, keeping your project lightweight."}],"_type":"block","style":"normal","_key":"819e378f4828","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Using Sly-cli","_key":"ceb050895bea"}],"_type":"block","style":"h4","_key":"c72fafbbeba2"},{"children":[{"_type":"span","marks":[],"text":"Here's an example of how to use Sly-cli to add Radix UI icons:","_key":"8329a2a0c440"}],"_type":"block","style":"normal","_key":"35fc28e03fe1","markDefs":[]},{"_key":"41243b5ba0e2","code":"npx @sly-cli/sly add @radix-ui/icons camera card-stack --yes --directory ./other/svg/radix","_type":"code"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"","_key":"9c9010ac1a65"}],"_type":"block","style":"normal","_key":"15a85b8a4e25"},{"children":[{"_key":"30786441fc24","_type":"span","marks":[],"text":"This command adds the 'camera' and 'card-stack' icons from the Radix UI icon set to the /other/svg/radix directory."}],"_type":"block","style":"normal","_key":"e9f4c28c6a42","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Interactive Mode","_key":"5a06e46bc267"}],"_type":"block","style":"h4","_key":"9fb4fc8de2d0"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"For a more user-friendly experience, you can use Sly-cli's interactive mode:","_key":"4fa706c9a430"}],"_type":"block","style":"normal","_key":"408eb87d9034"},{"_type":"code","_key":"bdf5c1c68097","code":"npx @sly-cli/sly add"},{"style":"normal","_key":"1cce8b200d6d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"This command launches an interactive interface in your terminal, allowing you to:","_key":"e564c615d706"}],"_type":"block"},{"_key":"6de7da3ba423","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Browse available icon libraries","_key":"ef9ebbac42dd"}],"level":1,"_type":"block","style":"normal"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"View and select specific icons","_key":"6c15994d077f"}],"level":1,"_type":"block","style":"normal","_key":"4709f53a606b"},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Choose the destination folder for your icons","_key":"4d5539bf8d9f"}],"level":1,"_type":"block","style":"normal","_key":"01dafbf1e19a"},{"children":[{"_type":"span","marks":[],"text":"Compiling Icons into a Sprite","_key":"5167569be89e"}],"_type":"block","style":"h4","_key":"87be7aad4944","markDefs":[]},{"_type":"block","style":"normal","_key":"f364159af954","markDefs":[],"children":[{"_type":"span","marks":[],"text":"An SVG sprite is a single SVG file that contains multiple icons, each wrapped in a element. This approach allows for efficient use of icons across your application.","_key":"14cc7fbb8b2d"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Creating the Sprite","_key":"259237d1411f"}],"_type":"block","style":"h4","_key":"ba289d3882ba"},{"_key":"3885043860f5","markDefs":[],"children":[{"text":"To generate this sprite, we'll use a custom script. This script needs to be run each time you add new icons. If you're using Sly-cli, you can configure it to run this script automatically after adding new icons (we'll cover this in the sly.json configuration later).","_key":"ef2f86a2d30a","_type":"span","marks":[]}],"_type":"block","style":"normal"},{"_type":"block","style":"h4","_key":"dd5dadddc47d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Installing Dependencies","_key":"b8c4d8afdd17"}]},{"_type":"block","style":"normal","_key":"3846b1e73781","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"First,","_key":"79146f93d782"},{"_key":"bf9f5a1c52ea","_type":"span","marks":[],"text":" we need to install some necessary dependencies. Run the following command in your project directory:"}]},{"code":"npm install fs-extra glob node-html-parser @types/fs-extra --save-dev","_type":"code","_key":"a6e942ea50a8"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"These packages will help us with file system operations, file matching, and HTML parsing.","_key":"546f36527273"}],"_type":"block","style":"normal","_key":"4816f994820e"},{"_type":"block","style":"h4","_key":"7b171007333a","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Creating the Build Script","_key":"41c0d8d675f2"}]},{"children":[{"_type":"span","marks":[],"text":"Next, we'll create a script to build our sprite. For a Next.js project, create a file named build-icons.mts in the root directory of your project.","_key":"1bf9670e74cd"}],"_type":"block","style":"normal","_key":"d5a17f62fcb8","markDefs":[]},{"children":[{"text":"Note:","_key":"9a08dc8cf490","_type":"span","marks":["strong"]},{"text":" The .mts file extension is used for TypeScript files in ECMAScript module format. This is necessary for the default Next.js app setup. If you're running your app in module mode, you might use a different extension.","_key":"368b0495f4a8","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"719bb525b7cb","markDefs":[]},{"children":[{"_type":"span","marks":["strong"],"text":"This script will:","_key":"ca30dd445502"}],"_type":"block","style":"normal","_key":"e6f32eec63fb","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Scan the /other/svg directory for SVG files","_key":"f177d64ada54"}],"level":1,"_type":"block","style":"normal","_key":"46165d913ed3","listItem":"bullet"},{"_key":"f36c8837ea86","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Convert each SVG into a element","_key":"189c1566bbf4"}],"level":1,"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"ccb61d5e8a56","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Combine all symbols into a single SVG sprite file","_key":"7ce7e72ce138"}],"level":1},{"children":[{"marks":[],"text":"Generate TypeScript type definitions for your icons","_key":"ce3a41c4f7d1","_type":"span"}],"level":1,"_type":"block","style":"normal","_key":"014ed1f368d0","listItem":"bullet","markDefs":[]},{"code":"$21","_type":"code","language":"javascript","_key":"2e3705d503b0"},{"_type":"block","style":"normal","_key":"3cafdfd88705","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Adding the Build Command to package.json","_key":"c624ae7b940a"}]},{"style":"normal","_key":"4bef09535abf","markDefs":[],"children":[{"marks":[],"text":"To make our icon compilation process easily accessible, we'll add a custom script to our package.json file.","_key":"7811991b33b2","_type":"span"}],"_type":"block"},{"markDefs":[],"children":[{"_key":"10a9252a327c","_type":"span","marks":[],"text":"Open your package.json file."}],"_type":"block","style":"normal","_key":"3559feb5530f"},{"children":[{"_type":"span","marks":[],"text":"In the \"scripts\" section, add the following line:","_key":"873efa75030a"}],"_type":"block","style":"normal","_key":"9f8593090cfa","markDefs":[]},{"code":"{ \"scripts\": { // ... other scripts \"build:icons\": \"npx tsx ./build-icons.mts\" } }","_type":"code","_key":"4bf09d125f6a"},{"_key":"12ebd691ba8a","markDefs":[],"children":[{"_type":"span","marks":[],"text":"This new script, build:icons, uses npx tsx to run our TypeScript file build-icons.mts.","_key":"301ba8504a7d"}],"_type":"block","style":"normal"},{"children":[{"_key":"927622adc55f","_type":"span","marks":["strong"],"text":"Running the Build Script"}],"_type":"block","style":"normal","_key":"d10526d7fb40","markDefs":[]},{"children":[{"_type":"span","marks":[],"text":"With this script in place, you can now compile your icons into a sprite by running:","_key":"4db6673ba8b5"}],"_type":"block","style":"normal","_key":"30cd5269369d","markDefs":[]},{"code":"npm run build:icons","_type":"code","_key":"faf04363c774"},{"style":"normal","_key":"428d2569f25b","markDefs":[],"children":[{"_key":"8d0980011649","_type":"span","marks":["strong"],"text":"Results of Running the Script"}],"_type":"block"},{"_type":"block","style":"normal","_key":"5577b3fe8006","markDefs":[],"children":[{"marks":[],"text":"When you run this command, two important files will be generated:","_key":"6f4494708033","_type":"span"}]},{"_type":"block","style":"normal","_key":"9067d5d77022","markDefs":[],"children":[{"marks":[],"text":"sprite.svg: This file will appear in the /public/icons directory. It contains all your icons as elements within a single SVG file.","_key":"ab26baaae3e1","_type":"span"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"name.d.ts: This file will be created in the types directory. It's a TypeScript declaration file that defines the names of all your icons as a union type.","_key":"b48ef288be42"}],"_type":"block","style":"normal","_key":"6999c85dcaec"},{"markDefs":[],"children":[{"marks":[],"text":"The name.d.ts file is crucial for TypeScript support. It allows your IDE to provide autocomplete suggestions for icon names and catches any typos or references to non-existent icons at compile time.","_key":"e3cee75c5c3d","_type":"span"}],"_type":"block","style":"normal","_key":"095fc9c3c027"},{"_key":"c018be995a82","markDefs":[],"children":[{"_type":"span","marks":[],"text":"By integrating this build process into your workflow, you ensure that your SVG sprite is always up-to-date with your latest icons, and your TypeScript types accurately reflect the available icons in your project.","_key":"2a3d2cd594be"}],"_type":"block","style":"normal"},{"_type":"block","style":"h4","_key":"7d03531174d3","markDefs":[],"children":[{"_key":"d51bf0840041","_type":"span","marks":[],"text":"\nUsing SVG Sprites in Next.js"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"After creating our SVG sprite, we can now use these icons efficiently in our Next.js application.","_key":"c724b58305d4"}],"_type":"block","style":"normal","_key":"cc865bd3e444"},{"style":"normal","_key":"b7c517b62035","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Basic Usage","_key":"b6597a6004f8"}],"_type":"block"},{"_key":"7385c617ac48","markDefs":[],"children":[{"_key":"2a49d33f22da","_type":"span","marks":[],"text":"The basic structure for using an icon from our sprite is:"}],"_type":"block","style":"normal"},{"code":"","_type":"code","language":"javascript","_key":"8a303f27aeb3"},{"_key":"4649f56addbf","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Here, name is the icon's identifier. If you used subfolders in your icon organization, the name would include the folder, e.g., radix/camera.","_key":"679ee3be05fa"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Creating a Reusable Icon Component","_key":"48c0894da729"}],"_type":"block","style":"h4","_key":"0bff47acafd7"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"To make our icons more versatile and type-safe, we'll create a reusable Icon component:","_key":"47927d305fdc"}],"_type":"block","style":"normal","_key":"f75889250f1c"},{"_key":"3f929eb5cd6b","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Create a new file components/Icon.tsx:","_key":"4080a6b5c005"}],"_type":"block","style":"normal"},{"_key":"1573a741fd81","code":"import { type SVGProps } from \"react\"\nimport { type IconName } from \"@/types/name\"\nimport { cn } from \"@/lib/cn\"\n\nexport { IconName }\n\nexport function Icon({\n name,\n childClassName,\n className,\n children,\n ...props\n}: SVGProps & {\n name: IconName\n childClassName?: string\n}) {\n if (children) {\n return (\n \n \n {children}\n \n )\n }\n return (\n \n \n \n )\n}","_type":"code","language":"javascript"},{"style":"normal","_key":"95a03c9d6a57","markDefs":[],"children":[{"_type":"span","marks":[],"text":"This component:","_key":"84feb579a869"}],"_type":"block"},{"level":1,"_type":"block","style":"normal","_key":"c4bec7754965","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Uses TypeScript for type safety","_key":"09338c67546a"}]},{"markDefs":[],"children":[{"text":"Allows passing SVG props and additional custom props","_key":"2d0dcf167d3d","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"872d0cb44b86","listItem":"bullet"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Supports rendering the icon alone or with accompanying text","_key":"a455c1003294"}],"level":1,"_type":"block","style":"normal","_key":"a3583ea3a31c","listItem":"bullet"},{"style":"normal","_key":"b7e428cf80ad","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Uses a utility function cn for class name management","_key":"d126b4a63b39"}],"level":1,"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"","_key":"990e2843a650"}],"_type":"block","style":"normal","_key":"3897c069888d","markDefs":[]},{"style":"normal","_key":"33574497df5a","markDefs":[],"children":[{"marks":["strong"],"text":"Create the cn utility function in lib/cn.ts:","_key":"049ea0c01106","_type":"span"}],"_type":"block"},{"code":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}","_type":"code","language":"javascript","_key":"514d0cfc3930"},{"markDefs":[],"children":[{"text":"This function combines clsx and tailwind-merge for efficient class name handling.","_key":"dfedf369b6ea","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"3f35aa4316aa"},{"style":"h4","_key":"04ee152dc7f6","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Using the Icon Component","_key":"8d40a9e761ad"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Now you can use the Icon component in your Next.js application:","_key":"f5072af0bb9b"}],"_type":"block","style":"normal","_key":"584122f4e013"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Basic usage:","_key":"24f300814a1e"}],"_type":"block","style":"normal","_key":"432d0064360d"},{"language":"javascript","_key":"6094259c6689","code":"","_type":"code"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"With accompanying text:","_key":"cb5030569685"}],"_type":"block","style":"normal","_key":"acbb2f9fda45"},{"_key":"db777f28b176","code":"\n Auto aligned text, with icon on left\n","_type":"code","language":"javascript"},{"style":"normal","_key":"1a6d2c5bbf1c","markDefs":[],"children":[{"_key":"421ff031e21b","_type":"span","marks":[],"text":"This setup allows for flexible and efficient use of your SVG icons throughout your Next.js application, with the benefits of TypeScript for type safety and Tailwind CSS for styling."}],"_type":"block"},{"style":"h3","_key":"7c138510c941","markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nPreloading the Sprite","_key":"5ad6da23d871"}],"_type":"block"},{"_type":"block","style":"normal","_key":"13fb3c439ad3","markDefs":[],"children":[{"_type":"span","marks":[],"text":"To ensure that our SVG sprite is loaded and ready to use as soon as the page loads, we'll implement a preloading mechanism. This is especially useful for improving the initial load performance of our application.","_key":"7a0f33207603"}]},{"style":"h4","_key":"92ea5a97a19e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Creating a Preload Component","_key":"bec272955da3"}],"_type":"block"},{"_type":"block","style":"normal","_key":"74956fbacf0d","markDefs":[],"children":[{"marks":[],"text":"Create a new file called preload-resources.tsx in your components directory:","_key":"eed8374931b9","_type":"span"}]},{"code":"\"use client\"\n\nimport ReactDOM from \"react-dom\"\n\nexport function PreloadResources() {\n ReactDOM.preload(\"/icons/sprite.svg\", {\n as: \"image\",\n })\n\n return null\n}","_type":"code","language":"javascript","_key":"0126b1f1528d"},{"children":[{"_type":"span","marks":[],"text":"This component:","_key":"5a3cc3c607a9"}],"_type":"block","style":"normal","_key":"505f99042985","markDefs":[]},{"listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Is marked with \"use client\" directive, indicating it's a Client Component in Next.js.","_key":"bcd1024cfd21"}],"level":1,"_type":"block","style":"normal","_key":"131e2e2d71d1"},{"children":[{"marks":[],"text":"Uses ReactDOM.preload() to preload the sprite file.","_key":"91c00e52efa8","_type":"span"}],"level":1,"_type":"block","style":"normal","_key":"8682df7045ae","listItem":"bullet","markDefs":[]},{"style":"normal","_key":"ce524a7c154b","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The as: \"image\" option tells the browser to preload the file as an image resource.","_key":"152e26e9e8d5"}],"level":1,"_type":"block"},{"_key":"3a756bd7fda3","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Returns null because it doesn't render any visible content.","_key":"dca9e8c086d3"}],"level":1,"_type":"block","style":"normal"},{"style":"normal","_key":"23543c80b23c","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Using the Preload Component","_key":"004ec953de61"}],"_type":"block"},{"style":"normal","_key":"673be4f2ddc3","markDefs":[],"children":[{"_type":"span","marks":[],"text":"To use this preload component, we need to add it to our top-level layout file.","_key":"49a4d4ef5922"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Open your app/layout.tsx file (or create it if it doesn't exist):\n","_key":"9bab3a445951"}],"_type":"block","style":"normal","_key":"7fe752eeab77"},{"code":"import { PreloadResources } from '../components/preload-resources'\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n \n \n \n \n {children}\n \n )\n}","_type":"code","language":"javascript","_key":"ad0eef3e0c0d"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"This setup:","_key":"4a8b11aebdb1"}],"_type":"block","style":"normal","_key":"98cd7f12d041"},{"_key":"1ed1fac3075b","listItem":"bullet","markDefs":[],"children":[{"text":"Imports the PreloadResources component.","_key":"7575c6a32609","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal"},{"_key":"3f0ef1c47109","listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"Places it within the tag of the HTML document.","_key":"c098e084435a","_type":"span"}],"level":1,"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Ensures that the sprite preloading occurs for every page in your application.","_key":"8304d76c425f"}],"level":1,"_type":"block","style":"normal","_key":"14ef2d6d034f","listItem":"bullet"},{"_type":"block","style":"h4","_key":"1c2a1f50d102","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Benefits of Preloading","_key":"13e1e3232071"}]},{"_key":"6f2a26940dc6","markDefs":[],"children":[{"marks":[],"text":"By preloading the SVG sprite:","_key":"6a0dee51356d","_type":"span"}],"_type":"block","style":"normal"},{"listItem":"bullet","markDefs":[],"children":[{"text":"The browser starts downloading the sprite file as soon as possible.","_key":"5585463b8502","_type":"span","marks":[]}],"level":1,"_type":"block","style":"normal","_key":"d66696d7f8ba"},{"style":"normal","_key":"a33348f36bb3","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Icons are likely to be available immediately when needed, reducing or eliminating any delay in icon rendering.","_key":"067840aa2ebf"}],"level":1,"_type":"block"},{"children":[{"_type":"span","marks":[],"text":"It improves the perceived performance of your application, especially for users with slower internet connections.","_key":"47b2cb22fad2"}],"level":1,"_type":"block","style":"normal","_key":"16f549d4b471","listItem":"bullet","markDefs":[]},{"markDefs":[],"children":[{"_key":"854c8a86a086","_type":"span","marks":[],"text":"Remember that while preloading can improve performance, it's also important to balance this with other resources that might need to be loaded. Always test the performance impact in your specific use case."}],"_type":"block","style":"normal","_key":"519915cab99f"},{"markDefs":[],"children":[{"_key":"0e01136b307b","_type":"span","marks":[],"text":"\nSly Configuration"}],"_type":"block","style":"h3","_key":"a56d3e79cb12"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"If you're using Sly to manage your SVG files, you can create a configuration file to automate the process of adding icons and running the build script. Here's an explanation of the example sly.json configuration:","_key":"e09ee74d2373"}],"_type":"block","style":"normal","_key":"e658fce56863"},{"children":[{"_type":"span","marks":[],"text":"Create a sly.json file in your project root:","_key":"826284de213f"}],"_type":"block","style":"normal","_key":"8674d4905074","markDefs":[]},{"code":"{\n \"$schema\": \"https://sly-cli.fly.dev/registry/config.json\",\n \"libraries\": [\n {\n \"name\": \"@radix-ui/icons\",\n \"directory\": \"./other/svg/radix\",\n \"postinstall\": [\n \"pnpm\",\n \"run\",\n \"build:icons\"\n ],\n \"transformers\": []\n },\n {\n \"name\": \"lucide-icons\",\n \"directory\": \"./other/svg/lucide\",\n \"postinstall\": [\n \"pnpm\",\n \"run\",\n \"build:icons\"\n ],\n \"transformers\": []\n }\n ]\n}","_type":"code","language":"json","_key":"6f36a02e288e"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Let's break down the Sly configuration for managing SVG icons:","_key":"87702a62d413"}],"_type":"block","style":"normal","_key":"083910f71073"},{"_key":"5e5fe3b0f392","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Sly Configuration","_key":"7f0d5ff61ec2"}],"_type":"block","style":"normal"},{"style":"normal","_key":"b86dc475cafb","markDefs":[],"children":[{"_type":"span","marks":[],"text":"If you're using Sly to manage your SVG files, you can create a configuration file to automate the process of adding icons and running the build script. Here's an explanation of the example sly.json configuration:","_key":"0e9ecae6a10a"}],"_type":"block"},{"style":"normal","_key":"63ede6390411","markDefs":[],"children":[{"_key":"1bf3c4c3d735","_type":"span","marks":[],"text":"Create a sly.json file in your project root:"}],"_type":"block"},{"_type":"code","language":"json","_key":"d1e5d60021c0","code":"{\n \"$schema\": \"https://sly-cli.fly.dev/registry/config.json\",\n \"libraries\": [\n {\n \"name\": \"@radix-ui/icons\",\n \"directory\": \"./other/svg/radix\",\n \"postinstall\": [\n \"pnpm\",\n \"run\",\n \"build:icons\"\n ],\n \"transformers\": []\n },\n {\n \"name\": \"lucide-icons\",\n \"directory\": \"./other/svg/lucide\",\n \"postinstall\": [\n \"pnpm\",\n \"run\",\n \"build:icons\"\n ],\n \"transformers\": []\n }\n ]\n}"},{"_type":"block","style":"normal","_key":"b2c189b2d640","markDefs":[],"children":[{"_key":"a3aaa238eb99","_type":"span","marks":["strong"],"text":"Let's break down this configuration:"}]},{"style":"normal","_key":"28410e0c8ba4","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"$$schema: This points to the JSON schema for Sly, ensuring your configuration is valid.","_key":"692a6973f670"}],"level":1,"_type":"block"},{"_type":"block","style":"normal","_key":"145fb59c0837","listItem":"bullet","markDefs":[],"children":[{"text":"libraries: An array of icon libraries you want to manage with Sly.","_key":"1eaa36c7c23b","_type":"span","marks":[]}],"level":1},{"children":[{"_key":"dd99b883cd4f","_type":"span","marks":["strong"],"text":"For each library:"}],"_type":"block","style":"normal","_key":"3c9ff85b5e1e","markDefs":[]},{"level":1,"_type":"block","style":"normal","_key":"2821db8b1708","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"name: The name of the icon library package.","_key":"80934ace48e9"}]},{"level":1,"_type":"block","style":"normal","_key":"e3d98939c6ec","listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"directory: Where the SVG files for this library should be stored in your project.","_key":"e4bf6b2a7e64","_type":"span"}]},{"level":1,"_type":"block","style":"normal","_key":"552fdeeea0ab","listItem":"bullet","markDefs":[],"children":[{"_type":"span","marks":[],"text":"postinstall: Commands to run after installing icons. Here, it runs the build:icons script using pnpm.","_key":"9ff3620aa3d5"}]},{"style":"normal","_key":"0206730ae9a4","listItem":"bullet","markDefs":[],"children":[{"marks":[],"text":"transformers: Any transformations to apply to the SVGs (empty in this case).","_key":"ee2f4cab80d3","_type":"span"}],"level":1,"_type":"block"},{"style":"h4","_key":"2b3bbbd54c0e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Benefits of this Configuration","_key":"84965470df25"}],"_type":"block"},{"style":"normal","_key":"d63dd2cdab55","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Automation: ","_key":"956b0951029c"},{"text":"Whenever you add new icons using Sly, it will automatically place them in the correct directory and run the build script.","_key":"9298f8cbd1a6","_type":"span","marks":[]}],"_type":"block"},{"style":"normal","_key":"590ed6165a28","markDefs":[],"children":[{"_key":"ac7b7298f332","_type":"span","marks":["strong"],"text":"Consistency:"},{"marks":[],"text":" Ensures all team members use the same directory structure and build process for icons.","_key":"2141adbe2141","_type":"span"}],"_type":"block"},{"_key":"0349eb1ca2b4","markDefs":[],"children":[{"_key":"1a0c09fa4598","_type":"span","marks":["strong"],"text":"Multiple Libraries: "},{"_type":"span","marks":[],"text":"You can easily manage icons from different libraries (like Radix UI and Lucide) in separate directories.","_key":"20ba4f2a997c"}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"fb762a49e6cf","markDefs":[],"children":[{"text":"Post-install Hook:","_key":"6b7cebf36d34","_type":"span","marks":["strong"]},{"marks":[],"text":" The build:icons script runs automatically after adding new icons, keeping your sprite up-to-date.","_key":"05bd8eb7f7c0","_type":"span"}]},{"style":"normal","_key":"5c68f9877b0d","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Using this Configuration: ","_key":"0e4626afb410"},{"_type":"span","marks":[],"text":"With this sly.json in place, you can add icons using Sly commands, and it will handle the file placement and build process automatically. For example:\n","_key":"3bd4b4c243db"}],"_type":"block"},{"code":"npx @sly-cli/sly add @radix-ui/icons:camera","_type":"code","_key":"205b663adf66"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"\nThis would add the camera icon from Radix UI to ./other/svg/radix and then run the build:icons script to update your sprite.","_key":"de3fd002aff5"}],"_type":"block","style":"normal","_key":"529a7399857f"},{"markDefs":[],"children":[{"text":"This configuration streamlines the process of managing and building your SVG sprite, making it easier to maintain a large set of icons from multiple libraries in your Next.js project.","_key":"0b2c7f616a08","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"83bae63ed7a9"}],"_updatedAt":"2025-02-13T11:44:22Z","categories":[{"_type":"blog.category","_id":"0ae64172-fd6a-40f8-af65-51fad7a14f35","title":"Front End Web Development","_updatedAt":"2025-02-08T17:42:39Z","slug":{"current":"front-end-web-development","_type":"slug"},"_createdAt":"2025-02-08T17:42:38Z","_rev":"UR1wkHm7gXQ1LoZmN7Eo42"}],"featured":false},{"metadata":{"noIndex":false,"slug":{"current":"exploring-the-useformstate-hook-in-react","_type":"slug"},"image":{"_type":"image","asset":{"_ref":"image-296e13d1014defa00f87aa27d5722cd512059560-2240x1260-png","_type":"reference"}},"_type":"metadata","description":"useFormState hook in React 19 and Next.js App Router provides a streamlined and powerful way to handle forms in your applications. ","title":"Exploring the useFormState Hook in React"},"body":[{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"React 19 is introducing some exciting new features, including a new compiler and support for form actions. One of the most interesting additions is the useFormState hook, which provides a powerful way to handle forms in your React applications. If you're using the Next.js App Router, you can start using these new tools right away!","_key":"54b6dbdc458b"}],"_type":"block","style":"normal","_key":"addc84d4f820"},{"_type":"block","style":"normal","_key":"a4d29849d893","markDefs":[],"children":[{"_type":"span","marks":[],"text":"To use form actions, you need two things: a form to post data to the action, and a server action that receives the form data, processes it, and returns a result. Let's start with the server side.","_key":"b4721529f52d"}]},{"_type":"block","style":"normal","_key":"c9db2b41366d","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Creating a Server Action:","_key":"6f3fc33aa1fd"}]},{"style":"normal","_key":"7a4b5eeebd04","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Create a new module, e.g., formPostAction.ts.","_key":"d1498d4e56a5"}],"_type":"block"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Define a server action function, e.g., onFormPostAction, as an async function.","_key":"7c2267ca0241"}],"_type":"block","style":"normal","_key":"a2f2936e8f8e"},{"_key":"0dc7f3958db6","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Add the \"use server\" directive at the top of the file or as the first line of the function.","_key":"0a16cae533d2"}],"_type":"block","style":"normal"},{"style":"normal","_key":"d404b56fc954","markDefs":[],"children":[{"_key":"b850b4ca8719","_type":"span","marks":[],"text":"Define the shape of your form state using a type, e.g., FormState."}],"_type":"block"},{"style":"normal","_key":"b532af5b55c3","markDefs":[],"children":[{"_type":"span","marks":[],"text":"The server action function should take the previous state and form data as arguments and return the new state.","_key":"6a0d30a7a9c1"}],"_type":"block"},{"children":[{"marks":[],"text":"Using useFormState on the Client:","_key":"4050fb4e648c","_type":"span"}],"_type":"block","style":"normal","_key":"2ef1c8bc69c7","markDefs":[]},{"children":[{"_type":"span","marks":[],"text":"Import the useFormState hook from \"react-dom\".","_key":"76337464e21b"}],"_type":"block","style":"normal","_key":"e6226bdfa9fe","markDefs":[]},{"_type":"block","style":"normal","_key":"9316cff5e669","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Import the server action function from your server module.","_key":"3ebdeff75c05"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Inside your component, call useFormState with the server action function and initial state.","_key":"2456f9bdc9b3"}],"_type":"block","style":"normal","_key":"1599c3c4159f"},{"_key":"42d1dbc03933","markDefs":[],"children":[{"_type":"span","marks":[],"text":"useFormState returns a tuple containing the current state and an action function.","_key":"a457920f7b8f"}],"_type":"block","style":"normal"},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"Pass the action function to the form's action property.\n\n","_key":"24ca5e837677"}],"_type":"block","style":"normal","_key":"984002230d0e"},{"code":"export default function MyForm() {\n const [state, action] = useFormState(onFormPostAction, { message: \"\" });\n const [first, setFirst] = useState(\"\");\n \n return (\n

\n setFirst(e.target.value)}\n />\n \n \n );\n}","_type":"code","language":"typescript","_key":"7ac01f7c48ea"},{"_key":"90667f30062b","markDefs":[],"children":[{"_type":"span","marks":[],"text":"When the form is submitted, the data is sent to the server action, which processes it and returns the new state. You can display the returned state in your component by adding it to the JSX.\n\nIn summary, the useFormState hook in React 19 and Next.js App Router provides a streamlined and powerful way to handle forms in your applications. By creating server actions and using useFormState on the client, you can easily manage form state and submissions, while also benefiting from the added bonus of JavaScript-free form functionality.\n","_key":"febf0de37113"}],"_type":"block","style":"normal"}],"_updatedAt":"2025-02-13T07:03:32Z","authors":[{"_type":"person","name":"Kagan Mert","_id":"280554de-536a-4676-89b3-fb80b3dd28ac","_updatedAt":"2025-02-08T17:45:37Z","image":{"_type":"image","asset":{"_ref":"image-ecbce85c332d96e23de2dbfd560c3c20e91cf454-460x460-jpg","_type":"reference"}},"_createdAt":"2025-02-08T17:42:07Z","_rev":"UR1wkHm7gXQ1LoZmN7Et6D"}],"hideTableOfContents":false,"_createdAt":"2025-02-08T17:51:14Z","_rev":"3k50p60fTIbtBaoyVXTUWg","_type":"blog.post","_id":"844482f4-f818-4980-987d-eda2dab89e9c","publishDate":"2024-02-15","featured":false,"categories":[{"_rev":"UR1wkHm7gXQ1LoZmN7Eo42","_type":"blog.category","_id":"0ae64172-fd6a-40f8-af65-51fad7a14f35","title":"Front End Web Development","_updatedAt":"2025-02-08T17:42:39Z","slug":{"current":"front-end-web-development","_type":"slug"},"_createdAt":"2025-02-08T17:42:38Z"}]},{"_createdAt":"2024-11-08T02:33:49Z","_updatedAt":"2025-02-08T17:45:43Z","body":[{"_key":"9d69de74e41e","markDefs":[],"children":[{"_type":"span","marks":[],"text":"Understanding Partial Prerendering in Next.js","_key":"45d87d7fef56"}],"_type":"block","style":"h1"},{"_type":"block","style":"normal","_key":"7a4b437bf688","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"Next.js","_key":"932503bb6770"},{"_type":"span","marks":[],"text":" is always introducing exciting new features to help developers build fast and dynamic web applications. One such experimental feature, available in Next.js 14, is called Partial Prerendering. It has the potential to be a game changer in how we think about rendering pages.","_key":"87dc71712541"}]},{"style":"normal","_key":"9f70a08dd369","markDefs":[],"children":[{"_type":"span","marks":["strong"],"text":"What exactly is Partial Prerendering?","_key":"fb38eb4b97c1"},{"text":"\nIn simple terms, it allows you to pre-render most of a page statically for speed, while still having some dynamic parts that load on demand. This gives you the best of both worlds - the fast initial load of static pages, with the flexibility and freshness of dynamic content.","_key":"82c3d55bf1f0","_type":"span","marks":[]}],"_type":"block"},{"_key":"02a11747e73e","markDefs":[],"children":[{"text":"Before Partial Prerendering, you had to choose whether a route should be entirely static or entirely dynamic. Static meant the whole page was pre-rendered ahead of time. Dynamic meant the whole page was rendered on-demand for each request. But most real-world pages aren't entirely one or the other - they have a mix of static and dynamic content.","_key":"99db0a33654c","_type":"span","marks":[]}],"_type":"block","style":"normal"},{"children":[{"_type":"span","marks":[],"text":"For example, imagine a typical e-commerce product page. A lot of it could be pre-rendered and served from a fast CDN:","_key":"a7c7533a3a78"}],"_type":"block","style":"normal","_key":"234725da8403","markDefs":[]},{"_type":"block","style":"normal","_key":"4cf192ba48b8","markDefs":[],"children":[{"_key":"2163a32c28dd","_type":"span","marks":[],"text":"• The page layout and design• The product title, description, and images• The site header, footer, and navigation"}]},{"_key":"ca45fb5e6c27","markDefs":[],"children":[{"text":"But some parts should really be fetched dynamically on each request:","_key":"33515db927d3","_type":"span","marks":[]}],"_type":"block","style":"normal"},{"_type":"block","style":"normal","_key":"5d142faa587c","markDefs":[],"children":[{"_type":"span","marks":[],"text":"• The \"Add to Cart\" button and shopping cart status• Personalized product recommendations• The current price and stock status","_key":"8eba6fb27e8f"}]},{"_type":"block","style":"normal","_key":"13774e11e7c3","markDefs":[],"children":[{"_type":"span","marks":[],"text":"With ","_key":"e33368479c2c"},{"marks":["strong"],"text":"Partial Prerendering","_key":"76eab042fb62","_type":"span"},{"marks":[],"text":", you can easily split your page into static and dynamic parts. You simply use a Suspense boundary in your React code to wrap the dynamic sections. Next.js will then intelligently serve a static page shell with \"holes\" where the dynamic content gets streamed in.","_key":"d7ebd65e8f37","_type":"span"}]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"From a user's perspective, they first see the fast static shell of the page. Then the personalized and dynamic parts fill in quickly, without blocking the rest of the page. It feels almost instant, even though some content is being dynamically fetched.","_key":"91714566012c"}],"_type":"block","style":"normal","_key":"e9b9533679bd"},{"children":[{"marks":[],"text":"Under the hood, Partial Prerendering leverages some advanced capabilities of React and Next.js:","_key":"5e999388fa8c","_type":"span"}],"_type":"block","style":"normal","_key":"bbfce2f6fa14","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"• React's concurrent rendering allows components to \"suspend\" while data is loading• Next.js' server components architecture allows using React on the server• Streaming responses enable sending the static and dynamic parts progressively","_key":"c60396e2f975"}],"_type":"block","style":"normal","_key":"1ba602187347"},{"children":[{"text":"But as a developer, you don't need to worry about all those details. The key is simply using Suspense boundaries to control what should be dynamic. The rest happens automatically with zero configuration required.","_key":"06f7e3be9e5d","_type":"span","marks":[]}],"_type":"block","style":"normal","_key":"1af525fee4dd","markDefs":[]},{"markDefs":[],"children":[{"_type":"span","marks":[],"text":"It's worth noting that Partial Prerendering is still an experimental feature. It's a glimpse into the future of what may become the default way to build pages. But it's not yet recommended for production apps.","_key":"574020ef6dc6"}],"_type":"block","style":"normal","_key":"101163e3a1e4"},{"_type":"block","style":"normal","_key":"e1df6faf1a26","markDefs":[{"_type":"link","href":"https://partialprerendering.com/","_key":"725c006f321f"}],"children":[{"_key":"c1f81e792753","_type":"span","marks":[],"text":"If you're curious to learn more, I suggest visiting "},{"_key":"c795643c720d","_type":"span","marks":["725c006f321f"],"text":"https://partialprerendering.com"},{"_type":"span","marks":[],"text":".","_key":"686aeccbf618"}]}],"metadata":{"title":"Understanding Partial Prerendering in Next.js","noIndex":false,"slug":{"current":"understanding-partial-prerendering-in-next-js","_type":"slug"},"image":{"_type":"image","asset":{"_ref":"image-220edbf86f7cb1e9ee509ac05ef80ccf68fe68c3-1858x2186-webp","_type":"reference"}},"_type":"metadata","description":"Partial Prerendering has the potential to revolutionize how we build web apps. It elegantly solves the tension between static and dynamic."},"_id":"4b916ae3-1c0f-47c3-b215-09ce4e6ac553","featured":false,"_rev":"hB1sSi0S707opeQQvph9zD","authors":[{"image":{"_type":"image","asset":{"_ref":"image-ecbce85c332d96e23de2dbfd560c3c20e91cf454-460x460-jpg","_type":"reference"}},"_createdAt":"2025-02-08T17:42:07Z","_rev":"UR1wkHm7gXQ1LoZmN7Et6D","_type":"person","name":"Kagan Mert","_id":"280554de-536a-4676-89b3-fb80b3dd28ac","_updatedAt":"2025-02-08T17:45:37Z"}],"categories":[{"_type":"blog.category","_id":"0ae64172-fd6a-40f8-af65-51fad7a14f35","title":"Front End Web Development","_updatedAt":"2025-02-08T17:42:39Z","slug":{"current":"front-end-web-development","_type":"slug"},"_createdAt":"2025-02-08T17:42:38Z","_rev":"UR1wkHm7gXQ1LoZmN7Eo42"}],"hideTableOfContents":false,"_type":"blog.post","publishDate":"2023-12-25"}],"className":"items-stretch gap-x-8 gap-y-12 carousel max-xl:full-bleed md:overflow-fade-r pb-4 [--size:320px] max-xl:px-4"}]}]]}]

Hey I'm Kagan