From the course: Building Interactive UIs with SolidJS: Key Concepts and Features
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Fine-grained reactivity and control flow helpers - JavaScript Tutorial
From the course: Building Interactive UIs with SolidJS: Key Concepts and Features
Fine-grained reactivity and control flow helpers
- [Instructor] As we've learnt, SolidJS doesn't rely on a virtual DOM diffing process. Instead, it updates only the exact parts of the DOM that needs changing, making it incredibly fast. Let's explore how SolidJS achieves this fine-grained reactivity with its control flow helpers. Control flow helpers are components that help you conditionally render content. They're a powerful way to build dynamic interfaces. We'll start with the for components. The for components provide a way to render a list of items, similar to JavaScript's map function. Each prop expects a list or a function that returns a list, or when rendering, it efficiently updates only the changed items. Or we can also access the current index through the optional seconds argument. Next, we have the show component, which lets us conditionally render content. The when prop checks for a truthy value to render the child's content. If it's falsy, it falls back…