... very long text ...
```
-Delegated events are **not case sensitive**, therefore using delegated event handlers in Solid can be written using camelCase or all lowercase.
-Note that while delegated events can be written both ways, native events _are_ case sensitive.
+Delegated events are **not case sensitive**, therefore using delegated event handlers in Solid can be written using camelCase or all lowercase. Note that while delegated events can be written both ways, native events _are_ case sensitive.
```tsx
```
-For any other events, such as custom events or events you wish _not_ to be delegated, the `on:` attribute will add an event listener as-is.
-This is what makes the event listener case sensitive.
+For any other events, such as custom events or events you wish _not_ to be delegated, the `on:` attribute will add an event listener as-is. This is what makes the event listener case sensitive.
```tsx
@@ -43,8 +40,7 @@ For typing standard or custom events using `on:`, the TypeScript page has a sect
## Binding events
-To optimize event handlers, you can pass an array as the event handler, replacing the function.
-When doing this, the second item passed into the array is supplied as the handler's first argument:
+To optimize event handlers, you can pass an array as the event handler, replacing the function. When doing this, the second item passed into the array is supplied as the handler's first argument:
```tsx
const handler = (data, event) => {
@@ -60,15 +56,11 @@ By binding events in this way, Solid avoids the overhead of using JavaScript's [
### Dynamic handlers
-An event handler does not form part of the reactive system.
-If you were to pass the handler as a signal, it will not respond to the changes of that signal.
-In other words, events do not dynamically update, and the bindings are not reactive.
-This is because attaching and detaching listeners is a resource-intensive task.
+An event handler does not form part of the reactive system. If you were to pass the handler as a signal, it will not respond to the changes of that signal. In other words, events do not dynamically update, and the bindings are not reactive. This is because attaching and detaching listeners is a resource-intensive task.
Since event handlers are called like a standard function, you can design them to call a reactive source, if needed.
-In the following example, `handleClick` represents a prop that has the flexibility to adopt any function.
-As a result, there is no requirement for these functions to be reactive.
+In the following example, `handleClick` represents a prop that has the flexibility to adopt any function. As a result, there is no requirement for these functions to be reactive.
```tsx
props.handleClick?.()} />
@@ -76,14 +68,11 @@ As a result, there is no requirement for these functions to be reactive.
## Event delegation
-Instead of attaching event listeners to every individual element, Solid uses _synthetic event delegation_, through the [`on__`](/reference/jsx-attributes/on_) form .
-In this method event listeners are attached to the `document` element, and dispatch events to the relevant elements as they bubble up.
+Instead of attaching event listeners to every individual element, Solid uses _synthetic event delegation_, through the [`on__`](/reference/jsx-attributes/on_) form . In this method event listeners are attached to the `document` element, and dispatch events to the relevant elements as they bubble up.
-By keeping the number of event listeners to a minimum, events can be captured more effectively.
-This is especially useful when working with a large number of elements, such as in a table or list.
+By keeping the number of event listeners to a minimum, events can be captured more effectively. This is especially useful when working with a large number of elements, such as in a table or list.
-Supported events such as `click`, `input` and `keydown` are just a few examples that are optimized in this way.
-To view the full list see the [references below](#list-of-delegated-events).
+Supported events such as `click`, `input` and `keydown` are just a few examples that are optimized in this way. To view the full list see the [references below](#list-of-delegated-events).
If you need to attach an event listener to an element that is not supported by Solid's event delegation, such as a custom event in a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements), you can use the [`on:__`](/reference/jsx-attributes/on) form.
@@ -95,14 +84,11 @@ If you need to attach an event listener to an element that is not supported by S
While delegated events provide some performance enhancements, there are tradeoffs.
-Event delegation is designed for event propagation through the JSX Tree, rather than the DOM Tree.
-This can differ from the previous expectations of how events work and flow.
+Event delegation is designed for event propagation through the JSX Tree, rather than the DOM Tree. This can differ from the previous expectations of how events work and flow.
Some things to keep in mind include:
-- Delegated event listeners are added _once_ per event type and handle all future events of that type.
-This means that delegated event listeners remain active even if the element that added them and its handler is removed.
- For example, if a `div` listens for `mousemove` and is later removed, the `mousemove` events will still be dispatched to the `document` in case a different element is also listening for mouse moves.
+- Delegated event listeners are added _once_ per event type and handle all future events of that type. This means that delegated event listeners remain active even if the element that added them and its handler is removed. For example, if a `div` listens for `mousemove` and is later removed, the `mousemove` events will still be dispatched to the `document` in case a different element is also listening for mouse moves.
```tsx
@@ -110,8 +96,7 @@ This means that delegated event listeners remain active even if the element that
:::tip[Occasional Events]
-Rather than using delegated events for events that happen infrequently, **native events** are a better solution.
-Since these events happen in specific circumstances, they do not benefit from the performance improvements you get with event delegation.
+Rather than using delegated events for events that happen infrequently, **native events** are a better solution. Since these events happen in specific circumstances, they do not benefit from the performance improvements you get with event delegation.
```tsx
@@ -121,9 +106,7 @@ Since these events happen in specific circumstances, they do not benefit from th
- `event.stopPropagation()` does not work as expected since events are attached to the `document` rather than the `element`.
- With cases like this, a native event is recommended.
- As an example, using a native event would stop the following event from reaching the `div native` handler, which is _not_ the case for delegated events.
- You can [view this example in the Solid Playground](https://playground.solidjs.com/anonymous/c5346f84-01e4-4080-8ace-4443ffd0bb10).
+ With cases like this, a native event is recommended. As an example, using a native event would stop the following event from reaching the `div native` handler, which is _not_ the case for delegated events. You can [view this example in the Solid Playground](https://playground.solidjs.com/anonymous/c5346f84-01e4-4080-8ace-4443ffd0bb10).
```tsx
onMount(() => {
@@ -171,8 +154,7 @@ button
[See how this solution differs in the Solid Playground](https://playground.solidjs.com/anonymous/9e2deddc-2e83-4ac2-8ee0-49c7c3a45d11).
-- [Portals](/concepts/control-flow/portal) propagate events following the _component tree_ and not the _DOM tree_, making them easier to use.
- This means when a `Portal` gets attached to the `body`, any events will propagate up to the `container`.
+- [Portals](/concepts/control-flow/portal) propagate events following the _component tree_ and not the _DOM tree_, making them easier to use. This means when a `Portal` gets attached to the `body`, any events will propagate up to the `container`.
```tsx
` can be nested to handle each condition.
```jsx
-import { Show } from "solid-js"
+import { Show } from "solid-js";
-
-
-
+
+
+ ;
```
-
## Switch and Match
-When there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `` components.
-Solid has the `` and `` components for this purpose.
+When there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `` components. Solid has the `` and `` components for this purpose.
-Similar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `` wraps multiple `` components so that each condition is evaluated _in sequence_.
-The first `` component that evaluates to true will have its children rendered, and the rest will be ignored.
+Similar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `` wraps multiple `` components so that each condition is evaluated _in sequence_. The first `` component that evaluates to true will have its children rendered, and the rest will be ignored.
```jsx
-import { Switch, Match } from "solid-js"
+import { Switch, Match } from "solid-js";
-
-
-
-
-
+
+
+
+
+ ;
```
-Similar to ``, each `` component has a `when` property that is used to determine whether or not to render its children.
-An optional `fallback` property can also be passed to `` to specify the content be rendered when none of the `` components evaluate to true.
+Similar to ``, each `` component has a `when` property that is used to determine whether or not to render its children. An optional `fallback` property can also be passed to `` to specify the content be rendered when none of the `` components evaluate to true.
```jsx
-import { Switch, Match } from "solid-js"
+import { Switch, Match } from "solid-js";
Fallback content}>
@@ -84,5 +75,5 @@ import { Switch, Match } from "solid-js"
-
+ ;
```
diff --git a/src/routes/concepts/control-flow/data.json b/src/routes/concepts/control-flow/data.json
index 3b874c4f05..e8261711d7 100644
--- a/src/routes/concepts/control-flow/data.json
+++ b/src/routes/concepts/control-flow/data.json
@@ -2,9 +2,9 @@
"title": "Control flow",
"pages": [
"conditional-rendering.mdx",
- "dynamic.mdx",
- "list-rendering.mdx",
- "portal.mdx",
- "error-boundary.mdx"
+ "dynamic.mdx",
+ "list-rendering.mdx",
+ "portal.mdx",
+ "error-boundary.mdx"
]
}
diff --git a/src/routes/concepts/control-flow/dynamic.mdx b/src/routes/concepts/control-flow/dynamic.mdx
index 671eda05b1..38ef095b06 100644
--- a/src/routes/concepts/control-flow/dynamic.mdx
+++ b/src/routes/concepts/control-flow/dynamic.mdx
@@ -3,25 +3,24 @@ title: "Dynamic"
order: 2
---
-`` is a Solid component that allows you to render components dynamically based on data.
-By passing either a string representing a [native HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or a component function to the `component` prop, you can render the chosen component with the remaining props you provide.
+`` is a Solid component that allows you to render components dynamically based on data. By passing either a string representing a [native HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) or a component function to the `component` prop, you can render the chosen component with the remaining props you provide.
```jsx
-import { createSignal, For } from "solid-js"
-import { Dynamic } from "solid-js/web"
+import { createSignal, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
-const RedDiv = () =>
- {(color) => }
+ {(color) => }
- )
+ );
}
```
@@ -88,15 +85,12 @@ Instead of a more verbose [`` and ``](/concepts/control-flow/cond
## Props
-When working with these components, you can pass [props](/concepts/components/props) to the component you are rendering by passing them to the `` component.
-This makes them available to the component you are rendering, similar to how you would pass props to components in JSX.
+When working with these components, you can pass [props](/concepts/components/props) to the component you are rendering by passing them to the `` component. This makes them available to the component you are rendering, similar to how you would pass props to components in JSX.
```jsx
-import { Dynamic } from "solid-js/web"
+import { Dynamic } from "solid-js/web";
function App() {
- return (
- `](/reference/components/error-boundary) component is used to create an error boundary.
-It catches any error that occurs during the rendering or updating of its children.
-However, an important note is that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are _not_ caught by error boundaries.
+The [``](/reference/components/error-boundary) component is used to create an error boundary. It catches any error that occurs during the rendering or updating of its children. However, an important note is that errors occurring outside the rendering process, such as in event handlers or after a `setTimeout`, are _not_ caught by error boundaries.
-The `fallback` prop can be used to display a user-friendly error message or notification when an error occurs.
-If a function is passed to `fallback`, it will receive the error object as well as a `reset` function.
-The `reset` function forces the `` to re-render its children and reset the error state, providing users with a way to recover from the error.
+The `fallback` prop can be used to display a user-friendly error message or notification when an error occurs. If a function is passed to `fallback`, it will receive the error object as well as a `reset` function. The `reset` function forces the `` to re-render its children and reset the error state, providing users with a way to recover from the error.
```tsx
import { ErrorBoundary } from "solid-js";
@@ -37,5 +32,4 @@ function App() {
}
```
-In this example, when the `ErrorProne` component throws an error, the `` catches it, preventing it from affecting the rest of the application.
-Instead, it displays the error message passed to the fallback prop.
+In this example, when the `ErrorProne` component throws an error, the `` catches it, preventing it from affecting the rest of the application. Instead, it displays the error message passed to the fallback prop.
diff --git a/src/routes/concepts/control-flow/list-rendering.mdx b/src/routes/concepts/control-flow/list-rendering.mdx
index 3227d985b8..e4e6e24dd3 100644
--- a/src/routes/concepts/control-flow/list-rendering.mdx
+++ b/src/routes/concepts/control-flow/list-rendering.mdx
@@ -5,16 +5,13 @@ order: 3
List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection.
-When dealing with dynamic data, Solid offers two ways to render lists: the `` and `` components.
-Both of these components help you loop over data collections to generate elements, however, they both cater to different scenarios.
+When dealing with dynamic data, Solid offers two ways to render lists: the `` and `` components. Both of these components help you loop over data collections to generate elements, however, they both cater to different scenarios.
## ``
-`` is a looping component that allows you to render elements based on the contents of an array or object.
-This component is designed to be used with **complex data structures**, such as arrays of objects, where the order and length of the list may change frequently.
+`` is a looping component that allows you to render elements based on the contents of an array or object. This component is designed to be used with **complex data structures**, such as arrays of objects, where the order and length of the list may change frequently.
-The sole property in `` is `each` , through which you can specify the data collection to loop over.
-This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as [`Object.entries`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) or [`Object.values`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values).
+The sole property in `` is `each` , through which you can specify the data collection to loop over. This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as [`Object.entries`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) or [`Object.values`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values).
```jsx
import { For } from "solid-js"
@@ -26,22 +23,21 @@ import { For } from "solid-js"
```
-Between the `` tags, the component requires a [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) which will dictate how each item in the data collection should be rendered.
-This structure resembles the callback used within JavaScript's [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) method, providing a familiar pattern to follow.
+Between the `` tags, the component requires a [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) which will dictate how each item in the data collection should be rendered. This structure resembles the callback used within JavaScript's [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) method, providing a familiar pattern to follow.
The function receives two arguments:
+
- `item`: represents the current item in the data collection that is being rendered over.
- `index`: the current item's index within the collection.
-You can access the current `item` and `index` to dynamically set attributes or content of the JSX elements.
-Index is a [*signal*](/concepts/signals) and must be called as a function to retrieve its value.
+You can access the current `item` and `index` to dynamically set attributes or content of the JSX elements. Index is a [_signal_](/concepts/signals) and must be called as a function to retrieve its value.
```jsx
{(item, index) => (
{item.name}
@@ -52,8 +48,7 @@ Index is a [*signal*](/concepts/signals) and must be called as a function to ret
## `Index`
-``, similar to ``, is a looping component that allows you to render elements based on the contents of an array or object.
-However, when the order and length of the list remain _stable_, but the content may change frequently, `` is a better option because it results in fewer re-renders.
+``, similar to ``, is a looping component that allows you to render elements based on the contents of an array or object. However, when the order and length of the list remain _stable_, but the content may change frequently, `` is a better option because it results in fewer re-renders.
```jsx
import { Index } from "solid-js"
@@ -67,12 +62,10 @@ import { Index } from "solid-js"
Similar to the `` component, `` accepts a single property named `each`, which is where you pass the structure you wish to loop over.
-Where the `index` is a signal with ``, it remains fixed with ``.
-This is because `` is more concerned with the **index** of the elements in the array.
-Because of this, the `item` is a signal, allowing the _content_ at each index to change without a re-render while the index remains fixed.
+Where the `index` is a signal with ``, it remains fixed with ``. This is because `` is more concerned with the **index** of the elements in the array. Because of this, the `item` is a signal, allowing the _content_ at each index to change without a re-render while the index remains fixed.
```jsx
-import { Index } from "solid-js"
+import { Index } from "solid-js";
{(item, index) => (
@@ -80,33 +73,28 @@ import { Index } from "solid-js"
{item().name} - {item().completed}
)}
-
+ ;
```
## `` vs ``
-`` is designed to be used when the *order* and *length* of the list may change frequently.
-When the list value changes in ``, the entire list is re-rendered.
-However, if the array undergoes a change, such as an element shifting position, `` will manage this by simply **moving** the corresponding DOM node and **updating** the index.
+`` is designed to be used when the _order_ and _length_ of the list may change frequently. When the list value changes in ``, the entire list is re-rendered. However, if the array undergoes a change, such as an element shifting position, `` will manage this by simply **moving** the corresponding DOM node and **updating** the index.
-``, however, is designed to be used when the **order** and **length** of the list remain _stable_, but the content may change frequently.
-When the list value changes in ``, only the content at the specified index is updated.
+``, however, is designed to be used when the **order** and **length** of the list remain _stable_, but the content may change frequently. When the list value changes in ``, only the content at the specified index is updated.
### When to use ``
-In cases where signals, nested loops, or dynamic lists are not required, `` is the best option.
-For example, when creating a list of static elements, such as a list of links, `` is the best option to use.
-This is because it will only modify the indexes of the elements in the list, rather than re-rendering the entire list.
+In cases where signals, nested loops, or dynamic lists are not required, `` is the best option. For example, when creating a list of static elements, such as a list of links, `` is the best option to use. This is because it will only modify the indexes of the elements in the list, rather than re-rendering the entire list.
```jsx
-import { createSignal, For } from "solid-js"
+import { createSignal, For } from "solid-js";
function StringList() {
- const [items, setItems] = createSignal(["Item 1", "Item 2", "Item 3"])
+ const [items, setItems] = createSignal(["Item 1", "Item 2", "Item 3"]);
return (
` is the better option to use.
-If you were using ``, the entire list would be re-rendered when a value changes, even if the length of the list remains unchanged.
-``, instead, will update the content at the specified index, while the rest of the list remains unchanged.
+If you are working with signals, [JavaScript primitives like strings and numbers](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) or input fields, `` is the better option to use. If you were using ``, the entire list would be re-rendered when a value changes, even if the length of the list remains unchanged. ``, instead, will update the content at the specified index, while the rest of the list remains unchanged.
```jsx
-import { createSignal, Index } from "solid-js"
+import { createSignal, Index } from "solid-js";
function FormList() {
- const [inputs, setInputs] = createSignal(['input1','input2','input3'])
- return(
+ const [inputs, setInputs] = createSignal(["input1", "input2", "input3"]);
+ return (
- )
+ );
}
-```
\ No newline at end of file
+```
diff --git a/src/routes/concepts/control-flow/portal.mdx b/src/routes/concepts/control-flow/portal.mdx
index fe20f754fc..414487a1f7 100644
--- a/src/routes/concepts/control-flow/portal.mdx
+++ b/src/routes/concepts/control-flow/portal.mdx
@@ -3,15 +3,14 @@ title: "Portal"
order: 3
---
-When an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can interfere with the desired intention or look of an application.
-`` helps with this by putting elements in a different place in the document, bringing an element into the document flow so they can render as expected.
+When an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can interfere with the desired intention or look of an application. `` helps with this by putting elements in a different place in the document, bringing an element into the document flow so they can render as expected.
```jsx
-import { Portal } from "solid-js/web"
+import { Portal } from "solid-js/web";
+ ;
```
The content nested within `` is rendered and positioned by default at the end of the document body.
@@ -21,43 +20,40 @@ The content nested within `` is rendered and positioned by default at th
preview="https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=IEPk0uiH2OC365hkpKf3wA&type=embed"
/>
-This can be changed by passing a `mount` prop to ``.
-The `mount` prop accepts a [DOM node](https://developer.mozilla.org/en-US/docs/Web/API/Node), which will be used as the mount point for the portal content.
+This can be changed by passing a `mount` prop to ``. The `mount` prop accepts a [DOM node](https://developer.mozilla.org/en-US/docs/Web/API/Node), which will be used as the mount point for the portal content.
```jsx
-import { Portal } from "solid-js/web"
+import { Portal } from "solid-js/web";
+ ;
```
+Using `` can be particularly useful in cases where elements, like information popups, might be clipped or obscured due to the overflow settings of their parent elements. By putting the element outside of the parent element, it is no longer bound by the overflow settings of its parent. This creates a more accessible experience for users, as the content is no longer obscured.
-Using `` can be particularly useful in cases where elements, like information popups, might be clipped or obscured due to the overflow settings of their parent elements.
-By putting the element outside of the parent element, it is no longer bound by the overflow settings of its parent.
-This creates a more accessible experience for users, as the content is no longer obscured.
+:::info
+`` will render wrapped unless specifically targeting `document.head`.
-:::info
- `` will render wrapped unless specifically targeting `document.head`.
-
- This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.
+This is so events propagate through the Portal according to the component hierarchy instead of the elements hierarchy.
By default, children will wrap in a `
console.log("portal key press")}>
diff --git a/src/routes/concepts/components/props.mdx b/src/routes/concepts/components/props.mdx
index 12e13afcce..2a12e86e64 100644
--- a/src/routes/concepts/components/props.mdx
+++ b/src/routes/concepts/components/props.mdx
@@ -2,8 +2,7 @@
title: Props
---
-Props are a way to pass state from a parent component to a child component.
-These read-only properties are passed to components as attributes within JSX and are accessible within the component via the `props` object:
+Props are a way to pass state from a parent component to a child component. These read-only properties are passed to components as attributes within JSX and are accessible within the component via the `props` object:
```tsx
function App() {
@@ -26,9 +25,7 @@ function MyComponent(props) {
## `mergeProps`
-[`mergeProps`](/reference/reactive-utilities/merge-props) is a Solid utility function designed to merge multiple potentially reactive objects together.
-It behaves similar to [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) but will retain the reactivity of the properties being merged.
-This helps ensure that when individual properties within the merged object change, their reactivity is not lost.
+[`mergeProps`](/reference/reactive-utilities/merge-props) is a Solid utility function designed to merge multiple potentially reactive objects together. It behaves similar to [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) but will retain the reactivity of the properties being merged. This helps ensure that when individual properties within the merged object change, their reactivity is not lost.
```typescript
import { mergeProps } from "solid-js";
@@ -43,16 +40,13 @@ function MyComponent(props) {
// Usage:
## Providing context to children
-To pass a value to the `Provider`, you use the `value` prop which can take in any value, including [signals](#updating-context-values).
-Once a value is passed to the `Provider`, it is available to all components that are descendants of the `Provider`.
+To pass a value to the `Provider`, you use the `value` prop which can take in any value, including [signals](#updating-context-values). Once a value is passed to the `Provider`, it is available to all components that are descendants of the `Provider`.
When passing a single value, it can be directly passed to the `value` prop:
@@ -61,32 +58,26 @@ const Provider = (props) => (
```
-When passing multiple values (as an `array` or `object`), it is recommended to use a [store](/reference/component-apis/create-context#usage).
+ When passing multiple values (as an `array` or `object`), it is recommended to
+ use a [store](/reference/component-apis/create-context#usage).
## Consuming context
-Once the values are available to all the components in the context's component tree, they can be accessed using the [`useContext`](/reference/component-apis/use-context) utility.
-This utility takes in the context object and returns the value(s) passed to the `Provider`:
+Once the values are available to all the components in the context's component tree, they can be accessed using the [`useContext`](/reference/component-apis/use-context) utility. This utility takes in the context object and returns the value(s) passed to the `Provider`:
```jsx title="/context/component.jsx"
import { createContext, useContext } from "solid-js";
import { MyContext } from "./create";
const Provider = (props) => (
-
- {props.children}
-
+ {props.children}
);
const Child = () => {
const value = useContext(MyContext);
- return (
-
- {value}
-
- );
+ return {value};
};
export const App = () => (
@@ -98,11 +89,9 @@ export const App = () => (
## Customizing Context Utilities
-When an application contains multiple context objects, it can be difficult to keep track of which context object is being used.
-To solve this issue, you can create a custom utilities to create a more readable way to access the context values.
+When an application contains multiple context objects, it can be difficult to keep track of which context object is being used. To solve this issue, you can create a custom utilities to create a more readable way to access the context values.
-For example, when wrapping a component tree, you may want to create a custom `Provider` component that can be used to wrap the component tree.
-This also provides you with the option of re-using the `Provider` component in other parts of your application, if needed.
+For example, when wrapping a component tree, you may want to create a custom `Provider` component that can be used to wrap the component tree. This also provides you with the option of re-using the `Provider` component in other parts of your application, if needed.
```jsx
import { createSignal, createContext, useContext } from "solid-js";
@@ -132,8 +121,7 @@ export function App() {
}
```
-Similarly, you can create a custom utility to access the context values.
-Instead of importing `useContext` and passing in the context object on each component that you're using it in, creating a customized utility can make it easier to access the values you need:
+Similarly, you can create a custom utility to access the context values. Instead of importing `useContext` and passing in the context object on each component that you're using it in, creating a customized utility can make it easier to access the values you need:
```jsx
export function useCounter() {
@@ -158,8 +146,7 @@ export function CounterProvider(props) {
## Updating Context Values
-[Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context.
-You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
+[Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context. You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
@@ -251,32 +241,27 @@ function Child() {
return
-Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
+ Read more about default values in the
+ [`createContext`](/reference/component-apis/create-context) entry.
-Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that
-the value returned might be `undefined` (as mentioned above).
-This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context.
-Additionally, if you use `useContext` and it returns `undefined` (which is often, but not always, the result of a bug), the error message thrown at runtime can be confusing.
+Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that the value returned might be `undefined` (as mentioned above). This can be quite annoying when you want to use the context inside a component, and particularly when immediately destructuring the context. Additionally, if you use `useContext` and it returns `undefined` (which is often, but not always, the result of a bug), the error message thrown at runtime can be confusing.
-The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`.
-This also serves to narrow the type returned, so TS doesn't complain.
-As an example:
+The most common solution for it is to wrap all uses of `useContext` in a function that will explicitly throw a helpful error if the context is `undefined`. This also serves to narrow the type returned, so TS doesn't complain. As an example:
```ts title="/context/counter-component.tsx"
function useCounterContext() {
- const context = useContext(CounterContext)
+ const context = useContext(CounterContext);
if (!context) {
- throw new Error("can't find CounterContext")
+ throw new Error("can't find CounterContext");
}
- return context
+ return context;
}
```
-
diff --git a/src/routes/concepts/control-flow/conditional-rendering.mdx b/src/routes/concepts/control-flow/conditional-rendering.mdx
index eecbdfe141..f8bc20aa96 100644
--- a/src/routes/concepts/control-flow/conditional-rendering.mdx
+++ b/src/routes/concepts/control-flow/conditional-rendering.mdx
@@ -3,79 +3,70 @@ title: "Conditional rendering"
order: 1
---
-Conditional rendering is the process of displaying different UI elements based on certain conditions.
-This is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.
+Conditional rendering is the process of displaying different UI elements based on certain conditions. This is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.
Solid offers dedicated components to handle conditional rendering in a more straightforward and readable way.
## Show
-`` renders its children when a condition is evaluated to be true.
-Similar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render.
+`` renders its children when a condition is evaluated to be true. Similar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render.
-`` has a `when` property that is used to determine whether or not to render its children.
-When there is a change in the state or props it depends on, this property is re-evaluated.
-This property can be a boolean value, or a function that returns a boolean value.
+`` has a `when` property that is used to determine whether or not to render its children. When there is a change in the state or props it depends on, this property is re-evaluated. This property can be a boolean value, or a function that returns a boolean value.
```jsx
-import { Show } from "solid-js"
+import { Show } from "solid-js";
-
+ ;
```
-`` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false.
-This property can return a JSX element.
+`` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false. This property can return a JSX element.
```jsx
-import { Show } from "solid-js"
+import { Show } from "solid-js";
Loading...
}>
@@ -27,7 +23,8 @@ This function has a `Provider` property that wraps the component tree you want t
import { createContext } from "solid-js";
const MyContext = createContext();
-```
+
+````
```jsx
@@ -40,14 +37,14 @@ export function Provider (props) {
)
};
-```
+````
+
@@ -195,11 +182,12 @@ export function CounterProvider(props) {
}
];
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
+
}
export function useCounter() { return useContext(CounterContext); }
@@ -212,15 +200,17 @@ import { useCounter } from "./Context";
export function Child(props) {
const [count, { increment, decrement }] = useCounter();
- return (
- <>
-
{count()}
-
-
-
- );
+ return (
+ <>
+ {count()}
+
+
+
+ );
+
};
-```
+
+````
{value}
;
}
-```
+````
## Common issues with `createContext` and `useContext`
If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
Loading...
-Loading...
+Hi, I am {data().name}.
- +; ``` If there are multiple conditions that need to be handled, `Loading...
- Error: {data.error}
- Loading...
+ Error: {data.error}
+ Outcome 1
-Outcome 2
-Outcome 1
+Outcome 2
+Outcome 2
Red
-const GreenDiv = () => Green
-const BlueDiv = () => Blue
+const RedDiv = () => Red
;
+const GreenDiv = () => Green
;
+const BlueDiv = () => Blue
;
const options = {
red: RedDiv,
green: GreenDiv,
blue: BlueDiv,
-}
+};
function App() {
- const [selected, setSelected] = createSignal("red")
+ const [selected, setSelected] = createSignal("red");
return (
<>
@@ -30,36 +29,34 @@ function App() {
onInput={(e) => setSelected(e.currentTarget.value)}
>
-
- {
// add the new item to the list
@@ -114,26 +102,24 @@ function StringList() {
/>
- +
- {item} - {index()} )}
...
-...
-`. If you portal into an SVG, then the `isSVG` prop must be used to avoid wrapping the children in a `
` and wrap in a `` instead.
```jsx
-import { Portal } from "solid-js/web"
+import { Portal } from "solid-js/web";
function Rect() {
- return (
-
-
- );
+ return (
+
+
+ );
}
function SVG() {
- return ;
+ return ;
}
```
+
:::
diff --git a/src/routes/concepts/derived-values/derived-signals.mdx b/src/routes/concepts/derived-values/derived-signals.mdx
index e0086fb456..6a6c12abdd 100644
--- a/src/routes/concepts/derived-values/derived-signals.mdx
+++ b/src/routes/concepts/derived-values/derived-signals.mdx
@@ -5,26 +5,20 @@ order: 1
Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.
-These functions are not executed immediately, but instead are only called when the values they rely on are changed.
-When the underlying signal is changed, the function will be called again to produce a new value.
+These functions are not executed immediately, but instead are only called when the values they rely on are changed. When the underlying signal is changed, the function will be called again to produce a new value.
```js
const double = () => count() * 2;
```
-In the above example, the `double` function relies on the `count` signal to produce a value.
-When the `count` signal is changed, the `double` function will be called again to produce a new value.
+In the above example, the `double` function relies on the `count` signal to produce a value. When the `count` signal is changed, the `double` function will be called again to produce a new value.
-Similarly you can create a derived signal that relies on a store value because stores use signals under the hood.
-To learn more about how stores work, [you can visit the stores section](/concepts/stores).
+Similarly you can create a derived signal that relies on a store value because stores use signals under the hood. To learn more about how stores work, [you can visit the stores section](/concepts/stores).
```js
-const fullName = () => store.firstName + ' ' + store.lastName;
+const fullName = () => store.firstName + " " + store.lastName;
```
-These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application.
-It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them.
-If included within a component's body, these derived signals will trigger an update when necessary.
+These dependent functions gain reactivity from the signal they access, ensuring that changes in the underlying data propagate throughout your application. It is important to note that these functions do not store a value themselves; instead, they can update any effects or components that depend on them. If included within a component's body, these derived signals will trigger an update when necessary.
-While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive.
-To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).
+While you can create derived values in this manner, Solid created the [`createMemo`](/reference/basic-reactivity/create-memo) primitive. To dive deeper into how memos work, [check out the memos section](/concepts/derived-values/memos).
diff --git a/src/routes/concepts/derived-values/memos.mdx b/src/routes/concepts/derived-values/memos.mdx
index 1c80f75ea7..b38b4c7e77 100644
--- a/src/routes/concepts/derived-values/memos.mdx
+++ b/src/routes/concepts/derived-values/memos.mdx
@@ -3,35 +3,28 @@ title: Memos
order: 2
---
-Memos are a type of reactive value that can be used to memoize derived state or expensive computations.
-They are similar to [derived signals](/concepts/derived-values/derived-signals) in that they are reactive values that automatically re-evaluate when their dependencies change.
-However, unlike derived signals, memos are optimized to execute only once for each change in their dependencies.
+Memos are a type of reactive value that can be used to memoize derived state or expensive computations. They are similar to [derived signals](/concepts/derived-values/derived-signals) in that they are reactive values that automatically re-evaluate when their dependencies change. However, unlike derived signals, memos are optimized to execute only once for each change in their dependencies.
-Memos expose a _read-only_ reactive value (like a [signal](/concepts/signals)) and track changes in their dependencies (similar to an [effect](/concepts/effects)).
-This makes them useful for caching the results of expensive or frequently accessed computations.
-By doing this, memos minimize unnecessary work within an application by retaining the results of a computation until its dependencies change.
+Memos expose a _read-only_ reactive value (like a [signal](/concepts/signals)) and track changes in their dependencies (similar to an [effect](/concepts/effects)). This makes them useful for caching the results of expensive or frequently accessed computations. By doing this, memos minimize unnecessary work within an application by retaining the results of a computation until its dependencies change.
## Using memos
-A memo is created using the `createMemo` function.
-Within this function, you can define the derived value or computations you wish to memoize.
-When called, `createMemo` will return a **getter** function that reads the current value of the memo:
+A memo is created using the `createMemo` function. Within this function, you can define the derived value or computations you wish to memoize. When called, `createMemo` will return a **getter** function that reads the current value of the memo:
```jsx
-import { createMemo, createSignal } from "solid-js"
+import { createMemo, createSignal } from "solid-js";
-const [count, setCount] = createSignal(0)
+const [count, setCount] = createSignal(0);
-const isEven = createMemo(() => count() % 2 === 0)
+const isEven = createMemo(() => count() % 2 === 0);
-console.log(isEven()) // true
+console.log(isEven()); // true
-setCount(3)
-console.log(isEven()) // false
+setCount(3);
+console.log(isEven()); // false
```
-While memos look similar to effects, they are different in that they _return a value_.
-This value is the result of the computation or derived state that you wish to memoize.
+While memos look similar to effects, they are different in that they _return a value_. This value is the result of the computation or derived state that you wish to memoize.
### Advantages of using memos
@@ -40,8 +33,7 @@ While you can use a [derived signal](/concepts/derived-values/derived-signals) t
- Memos are optimized to execute only once for each change in their dependencies.
- When working with expensive computations, memos can be used to cache the results so they are not recomputed unnecessarily.
- A memo will only recompute when its dependencies change, and will not trigger subsequent updates (as determined by [`===` or strict equality](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)) if its dependencies change but its value remains the same.
-- Any signal or memo accessed within a memo's function is **tracked**.
- This means that the memo will re-evaluate automatically when these dependencies change.
+- Any signal or memo accessed within a memo's function is **tracked**. This means that the memo will re-evaluate automatically when these dependencies change.
count() % 2 === 0) // example of a pure function
+const [count, setCount] = createSignal(0);
+const isEven = createMemo(() => count() % 2 === 0); // example of a pure function
```
-A pure function is one that does not cause any side effects.
-This means that the function's output should solely depend on its inputs.
+A pure function is one that does not cause any side effects. This means that the function's output should solely depend on its inputs.
-When you introduce side effects into a memo, it can complicate the reactivity chain.
-This can lead to unexpected behavior, such as infinite loops, that lead your application to crash.
+When you introduce side effects into a memo, it can complicate the reactivity chain. This can lead to unexpected behavior, such as infinite loops, that lead your application to crash.
```jsx
-import { createSignal, createMemo } from "solid-js"
+import { createSignal, createMemo } from "solid-js";
-const [count, setCount] = createSignal(0)
-const [message, setMessage] = createSignal("")
+const [count, setCount] = createSignal(0);
+const [message, setMessage] = createSignal("");
const badMemo = createMemo(() => {
if (count() > 10) {
- setMessage("Count is too high!") // side effect
+ setMessage("Count is too high!"); // side effect
}
- return count() % 2 === 0
-})
+ return count() % 2 === 0;
+});
```
-These infinite loops can be triggered when a memo has a side effect that causes its dependencies to change.
-This will cause the memo to re-evaluate, which will then trigger the side effect again, and so on until the application crashes.
+These infinite loops can be triggered when a memo has a side effect that causes its dependencies to change. This will cause the memo to re-evaluate, which will then trigger the side effect again, and so on until the application crashes.
This can be avoided by using a [`createEffect`](/reference/basic-reactivity/create-effect) to handle the side effects instead:
```jsx
-import { createSignal, createMemo, createEffect } from "solid-js"
+import { createSignal, createMemo, createEffect } from "solid-js";
-const [count, setCount] = createSignal(0)
-const [message, setMessage] = createSignal("")
+const [count, setCount] = createSignal(0);
+const [message, setMessage] = createSignal("");
-const isEven = createMemo(() => count() % 2 === 0)
+const isEven = createMemo(() => count() % 2 === 0);
createEffect(() => {
if (count() > 10) {
- setMessage("Count is too high!")
+ setMessage("Count is too high!");
}
-})
+});
```
Here, the `createEffect` will handle the side effects, while the `isEven` memo will remain pure.
### Keep logic in memos
-Memos are optimized to execute only once for each change in their dependencies.
-This means that you can remove unnecessary effects that are triggered by a memo's dependencies.
+Memos are optimized to execute only once for each change in their dependencies. This means that you can remove unnecessary effects that are triggered by a memo's dependencies.
-When working with derived state, memos are the recommended approach over effects.
-Keeping the logic in a memo prevents unnecessary re-renders that can occur when using an effect.
-Similarly, effects are better suited to handle side effects, such as DOM updates, rather than derived state.
-This separation of concerns can help keep your code clean and easy to understand.
+When working with derived state, memos are the recommended approach over effects. Keeping the logic in a memo prevents unnecessary re-renders that can occur when using an effect. Similarly, effects are better suited to handle side effects, such as DOM updates, rather than derived state. This separation of concerns can help keep your code clean and easy to understand.
```jsx
// effect - runs whenever `count` changes
createEffect(() => {
if (count() > 10) {
- setMessage("Count is too high!")
+ setMessage("Count is too high!");
} else {
- setMessage("")
+ setMessage("");
}
-})
+});
// memo - only runs when `count` changes to or from a value greater than 10
const message = createMemo(() => {
if (count() > 10) {
- return "Count is too high!"
+ return "Count is too high!";
} else {
- return ""
+ return "";
}
-})
+});
```
diff --git a/src/routes/concepts/effects.mdx b/src/routes/concepts/effects.mdx
index fe15500bdf..8e149e22e3 100644
--- a/src/routes/concepts/effects.mdx
+++ b/src/routes/concepts/effects.mdx
@@ -3,13 +3,11 @@ title: Effects
order: 4
---
-Effects are functions that are triggered when the signals they depend on change.
-They play a crucial role in managing side effects, which are actions that occur outside of the application's scope, such as DOM manipulations, data fetching, and subscriptions.
+Effects are functions that are triggered when the signals they depend on change. They play a crucial role in managing side effects, which are actions that occur outside of the application's scope, such as DOM manipulations, data fetching, and subscriptions.
## Using an effect
-An effect is created using the `createEffect` function.
-This function takes a callback as its argument that runs when the effect is triggered.
+An effect is created using the `createEffect` function. This function takes a callback as its argument that runs when the effect is triggered.
```jsx
import { createEffect } from "solid-js";
@@ -21,19 +19,13 @@ createEffect(() => {
});
```
-In this example, an effect is created that logs the current value of `count` to the console.
-When the value of `count` changes, the effect is triggered, causing it to run again and log the new value of `count`.
+In this example, an effect is created that logs the current value of `count` to the console. When the value of `count` changes, the effect is triggered, causing it to run again and log the new value of `count`.
## Managing dependencies
-Effects can be set to observe any number of dependencies.
-Dependencies are what allow an effect to track changes and respond accordingly.
-These can include signals, variables, props, context, or any other reactive values.
-When any of these change, the effect is notified and will run again to update its state.
+Effects can be set to observe any number of dependencies. Dependencies are what allow an effect to track changes and respond accordingly. These can include signals, variables, props, context, or any other reactive values. When any of these change, the effect is notified and will run again to update its state.
-Upon initialization, an effect will run _once_, regardless of whether it has any dependencies.
-This is useful for setting up the effect and initializing variables or subscribing to [signals](/concepts/signals).
-After this run, the effect will only be triggered when any of its _dependencies_ change.
+Upon initialization, an effect will run _once_, regardless of whether it has any dependencies. This is useful for setting up the effect and initializing variables or subscribing to [signals](/concepts/signals). After this run, the effect will only be triggered when any of its _dependencies_ change.
```jsx
createEffect(() => {
@@ -45,13 +37,11 @@ createEffect(() => {
});
```
-Solid automatically tracks the dependencies of an effect, so you do not need to manually specify them.
-This improves the tracking and minimizes the chances of overlooking or incorrectly identifying dependencies.
+Solid automatically tracks the dependencies of an effect, so you do not need to manually specify them. This improves the tracking and minimizes the chances of overlooking or incorrectly identifying dependencies.
## Subscribing to signals
-When an effect is set to observe a signal, it creates a subscription to it.
-This subscription allows the effect to track the changes in the signal's value, which causes it to observe any changes that may happen and to execute its callback accordingly.
+When an effect is set to observe a signal, it creates a subscription to it. This subscription allows the effect to track the changes in the signal's value, which causes it to observe any changes that may happen and to execute its callback accordingly.
```jsx
import { createSignal, createEffect } from "solid-js";
@@ -65,13 +55,9 @@ createEffect(() => {
### Managing multiple signals
-Effects have the ability to observe multiple signals.
-A single effect can subscribe to multiple signals, and similarly, multiple effects can keep track of a single signal.
-This is useful when you need to update the UI based on multiple signals.
+Effects have the ability to observe multiple signals. A single effect can subscribe to multiple signals, and similarly, multiple effects can keep track of a single signal. This is useful when you need to update the UI based on multiple signals.
-When multiple signals are observed within a single effect, it will execute its callback whenever _any_ of the signals change.
-The effect will run even if only one of the signals changes, not necessarily all of them.
-This means that the effect will run with the latest values of all of the signals that it is observing.
+When multiple signals are observed within a single effect, it will execute its callback whenever _any_ of the signals change. The effect will run even if only one of the signals changes, not necessarily all of them. This means that the effect will run with the latest values of all of the signals that it is observing.
```jsx
import { createSignal, createEffect } from "solid-js";
@@ -88,15 +74,14 @@ setMessage("World"); // Output: 1, "World"
```
:::info
-When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*.
-While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous.
-This means that the order of execution of effects is *not guaranteed* and should not be relied upon.
+
+When a signal updates, it notifies all of its subscribers sequentially but the _order can vary_. While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous. This means that the order of execution of effects is _not guaranteed_ and should not be relied upon.
+
:::
### Nested effects
-When working with effects, it is possible to nest them within each other.
-This allows each effect to independently track its own dependencies, without affecting the effect that it is nested within.
+When working with effects, it is possible to nest them within each other. This allows each effect to independently track its own dependencies, without affecting the effect that it is nested within.
```jsx
createEffect(() => {
@@ -106,10 +91,7 @@ createEffect(() => {
});
```
-The order of execution is important to note.
-An inner effect will _not_ affect the outer effect.
-Signals that are accessed within an inner effect, will _not_ be registered as dependencies for the outer effect.
-When the signal located within the inner effect changes, it will trigger only the _inner effect_ to re-run, not the outer one.
+The order of execution is important to note. An inner effect will _not_ affect the outer effect. Signals that are accessed within an inner effect, will _not_ be registered as dependencies for the outer effect. When the signal located within the inner effect changes, it will trigger only the _inner effect_ to re-run, not the outer one.
```jsx
import { createSignal, createEffect } from "solid-js";
@@ -123,20 +105,15 @@ createEffect(() => {
});
```
-This forces each effect to be independent of each other, which helps to avoid unexpected behaviour.
-Additionally, it allows you to create effects that are only triggered when certain conditions are met.
+This forces each effect to be independent of each other, which helps to avoid unexpected behaviour. Additionally, it allows you to create effects that are only triggered when certain conditions are met.
## Lifecycle functions
-Effects have a lifecycle that can be managed using certain functions.
-These functions allow you to control the initialization and disposal of effects to build the type of behaviour that you need.
-This can include running a side effect only once, or cleaning up a task when it is no longer needed.
+Effects have a lifecycle that can be managed using certain functions. These functions allow you to control the initialization and disposal of effects to build the type of behaviour that you need. This can include running a side effect only once, or cleaning up a task when it is no longer needed.
### `onMount`
-In situations where you just want to run a side effect **once**, you can use the [`onMount`](/reference/lifecycle/on-mount) function.
-This lifecycle function is similar to an effect, but it does not track any dependencies.
-Rather, once the component has been initialized, the `onMount` callback will be executed and will not run again.
+In situations where you just want to run a side effect **once**, you can use the [`onMount`](/reference/lifecycle/on-mount) function. This lifecycle function is similar to an effect, but it does not track any dependencies. Rather, once the component has been initialized, the `onMount` callback will be executed and will not run again.
```jsx
import { onMount } from "solid-js";
@@ -158,14 +135,11 @@ function Component() {
}
```
-`onMount` provides the assurance that the callback will only run once.
-If using an effect in this situation, there is no guarantee that it will only run once, which can lead to unexpected behaviour.
-This makes `onMount` useful for API calls and other side effects that only need to be run once per component instance.
+`onMount` provides the assurance that the callback will only run once. If using an effect in this situation, there is no guarantee that it will only run once, which can lead to unexpected behaviour. This makes `onMount` useful for API calls and other side effects that only need to be run once per component instance.
### `onCleanup`
-While `onMount` is useful for running a side effect once, [`onCleanup`](/reference/lifecycle/on-cleanup) is helpful for cleaning up a task when it is no longer needed.
-`onCleanup` will run whenever the component unmounts, removing any subscriptions that the effect has.
+While `onMount` is useful for running a side effect once, [`onCleanup`](/reference/lifecycle/on-cleanup) is helpful for cleaning up a task when it is no longer needed. `onCleanup` will run whenever the component unmounts, removing any subscriptions that the effect has.
```jsx
import { onCleanup } from "solid-js";
@@ -185,9 +159,6 @@ function App() {
}
```
-In this example, the `onCleanup` function is used to clear the interval that is set up in the effect.
-To avoid the interval from running indefinitely, the `onCleanup` function is used to clear the interval once the component unmounts.
+In this example, the `onCleanup` function is used to clear the interval that is set up in the effect. To avoid the interval from running indefinitely, the `onCleanup` function is used to clear the interval once the component unmounts.
-`onCleanup` can be used to avoid memory leaks.
-These occur when a component is unmounted, but references to it still exist and, as a result, could still be running in the background.
-Using `onCleanup` to remove any subscriptions or references to the component can help to avoid this issue.
+`onCleanup` can be used to avoid memory leaks. These occur when a component is unmounted, but references to it still exist and, as a result, could still be running in the background. Using `onCleanup` to remove any subscriptions or references to the component can help to avoid this issue.
diff --git a/src/routes/concepts/intro-to-reactivity.mdx b/src/routes/concepts/intro-to-reactivity.mdx
index fa3e35fc28..83e6e2365e 100644
--- a/src/routes/concepts/intro-to-reactivity.mdx
+++ b/src/routes/concepts/intro-to-reactivity.mdx
@@ -5,9 +5,7 @@ order: 1
**Note**: While this guide is useful for understanding reactive systems, it does use some Solid-specific terminology.
-Reactivity powers the interactivity in Solid applications.
-This programming paradigm refers to a system's ability to respond to changes in data or state automatically.
-With Solid, reactivity is the basis of its design, ensuring application's stay up-to-date with its underlying data.
+Reactivity powers the interactivity in Solid applications. This programming paradigm refers to a system's ability to respond to changes in data or state automatically. With Solid, reactivity is the basis of its design, ensuring application's stay up-to-date with its underlying data.
## Importance of reactivity
@@ -32,8 +30,7 @@ function Counter() {
}
```
-This `Counter` function sets up a button that, when clicked, calls the `increment` function to increase the `count` by one.
-This updates just the number displayed _without_ refreshing the entire component.
+This `Counter` function sets up a button that, when clicked, calls the `increment` function to increase the `count` by one. This updates just the number displayed _without_ refreshing the entire component.
- Count: {count()}{/* ✅ will update whenever `count()` changes. */}
+ Count: {count()}
+ {/* ✅ will update whenever `count()` changes. */}
@@ -195,18 +175,13 @@ To learn more about managing state in Solid, visit the [guide on state managemen
## Synchronous vs. asynchronous
-Reactive systems are designed to respond to changes in data.
-These responses can be immediate or delayed, depending on the nature of the system.
-Often, the choice between these two depends on the requirements of the application and the nature of the tasks involved.
+Reactive systems are designed to respond to changes in data. These responses can be immediate or delayed, depending on the nature of the system. Often, the choice between these two depends on the requirements of the application and the nature of the tasks involved.
### Synchronous reactivity
-[Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous) reactivity is Solid's default reactivity mode, where a system responds to changes in a direct and linear fashion.
-When a signal changes, any corresponding subscribers are immediately updated in an ordered manner.
+[Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous) reactivity is Solid's default reactivity mode, where a system responds to changes in a direct and linear fashion. When a signal changes, any corresponding subscribers are immediately updated in an ordered manner.
-With synchronous reactivity, the system is able to respond to changes in a predictable manner.
-This is useful in scenarios where the order of updates is important.
-For example, if a subscriber depends on another signal, it is important that the subscriber is updated after the signal it depends on.
+With synchronous reactivity, the system is able to respond to changes in a predictable manner. This is useful in scenarios where the order of updates is important. For example, if a subscriber depends on another signal, it is important that the subscriber is updated after the signal it depends on.
```jsx
const [count, setCount] = createSignal(0);
@@ -217,32 +192,23 @@ createEffect(() => {
});
```
-In this example, the `double` signal will always be updated after `count` due to synchronous reactivity.
-This ensures that `double` is always up-to-date with the latest value of `count`.
+In this example, the `double` signal will always be updated after `count` due to synchronous reactivity. This ensures that `double` is always up-to-date with the latest value of `count`.
### Asynchronous reactivity
-[Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous) reactivity is when a system responds to changes in a delayed or non-linear fashion.
-When a signal changes, the corresponding subscribers are not immediately updated.
-Instead, the system waits for a specific event or task to complete before updating the subscribers.
+[Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous) reactivity is when a system responds to changes in a delayed or non-linear fashion. When a signal changes, the corresponding subscribers are not immediately updated. Instead, the system waits for a specific event or task to complete before updating the subscribers.
-This is important in scenarios where subscribers depend on multiple signals.
-In these cases, updating one signal before another could result in data inconsistency.
-For example, if a subscriber depends on two signals, it is important that the subscriber is updated after both signals have been updated.
-Rather, the system waits for both signals to be updated before updating the subscriber.
+This is important in scenarios where subscribers depend on multiple signals. In these cases, updating one signal before another could result in data inconsistency. For example, if a subscriber depends on two signals, it is important that the subscriber is updated after both signals have been updated. Rather, the system waits for both signals to be updated before updating the subscriber.
-**Note:** When asynchronous reactivity is present, it is important to ensure that the system is able to handle the delay in updates.
-[`batch`](/reference/reactive-utilities/batch) can be used to delay an update so the subscriber runs after each signal has been updated.
+**Note:** When asynchronous reactivity is present, it is important to ensure that the system is able to handle the delay in updates. [`batch`](/reference/reactive-utilities/batch) can be used to delay an update so the subscriber runs after each signal has been updated.
## Key concepts
-- Signals are the core elements of a reactive system.
- They are responsible for storing and managing data.
+- Signals are the core elements of a reactive system. They are responsible for storing and managing data.
- Signals are both readable and writeable because of getters and setters.
- Subscribers are automated responders that track changes in signals and update the system accordingly.
- Signals and subscribers work together to ensure that the system is kept up-to-date with the latest data changes.
-- A reactive system is built on the principles of data-driven reactivity.
- This means that the system's reactivity is driven by the data it is built on.
+- A reactive system is built on the principles of data-driven reactivity. This means that the system's reactivity is driven by the data it is built on.
- Reactive systems can be synchronous or asynchronous.
If you want to dive deeper, visit the [guide on fine-grained reactivity](/advanced-concepts/fine-grained-reactivity).
diff --git a/src/routes/concepts/refs.mdx b/src/routes/concepts/refs.mdx
index be36527bb4..7947ffdcc0 100644
--- a/src/routes/concepts/refs.mdx
+++ b/src/routes/concepts/refs.mdx
@@ -2,17 +2,13 @@
title: Refs
---
-Refs, or references, are a special attribute that can be attached to any element, and are used to reference a DOM element or a component instance.
-They are particularly useful when you need to access the DOM nodes directly or invoke methods on a component.
+Refs, or references, are a special attribute that can be attached to any element, and are used to reference a DOM element or a component instance. They are particularly useful when you need to access the DOM nodes directly or invoke methods on a component.
## Accessing DOM elements
-One way of accessing DOM elements is through [element selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) such as [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
-Since elements in Solid can be added or removed from the DOM based on state, you need to wait until the element is attached to the DOM before accessing it.
-This can be done by using [`onMount`](/reference/lifecycle/on-mount) to wait until the element is attached to the DOM before accessing it:
+One way of accessing DOM elements is through [element selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) such as [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). Since elements in Solid can be added or removed from the DOM based on state, you need to wait until the element is attached to the DOM before accessing it. This can be done by using [`onMount`](/reference/lifecycle/on-mount) to wait until the element is attached to the DOM before accessing it:
-Accessing DOM elements through element selectors is not recommended for this reason.
-As elements with the same selectors are added and removed from the DOM, the first element that matches the selector will be returned, which may not be the element you want.
+Accessing DOM elements through element selectors is not recommended for this reason. As elements with the same selectors are added and removed from the DOM, the first element that matches the selector will be returned, which may not be the element you want.
## JSX as a value
@@ -20,17 +16,15 @@ JSX can be used as a value and assigned to a variable when looking to directly a
```tsx
function Component() {
- const myElement =
- )
+ );
}
```
-These assignments occur at _creation time_ prior to the element being added to the DOM.
-If access to an element is needed before it is added to the DOM, you can use the callback form of `ref`:
+These assignments occur at _creation time_ prior to the element being added to the DOM. If access to an element is needed before it is added to the DOM, you can use the callback form of `ref`:
```jsx
-
- )
+ );
}
// Child component
@@ -137,18 +126,15 @@ function Canvas(props) {
- )
-}
+ );
+};
```
-When a store is created, it starts with the initial state but does _not_ immediately set up signals to track changes.
-These signals are created **lazily**, meaning they are only formed when accessed within a reactive context.
+When a store is created, it starts with the initial state but does _not_ immediately set up signals to track changes. These signals are created **lazily**, meaning they are only formed when accessed within a reactive context.
Once data is used within a reactive context, such as within the return statement of a component function, computed property, or an effect, a signal is created and dependencies are established.
For example, if you wanted to print out every new user, adding the console log below will not work because it is not within a tracked scope.
-
```tsx ins={9}
const App = () => {
const [store, setStore] = createStore({
@@ -147,8 +140,7 @@ const App = () => {
## Modifying store values
-Updating values within a store is best accomplished using a setter provided by the `createStore` initialization.
-This setter allows for the modification of a specific key and its associated value, following the format `setStore(key, newValue)`:
+Updating values within a store is best accomplished using a setter provided by the `createStore` initialization. This setter allows for the modification of a specific key and its associated value, following the format `setStore(key, newValue)`:
```jsx "setStore"
const [store, setStore] = createStore({
@@ -193,13 +185,17 @@ const App = () => {
}
```
-:::info
+:::info
+
Separating the read and write capabilities of a store provides a valuable debugging advantage.
This separation facilitates the tracking and control of the components that are accessing or changing the values.
-:::
-:::advanced
- A little hidden feature of stores is that you can also create nested stores to help with setting nested properties.
+
+:::
+
+:::advanced
+
+A little hidden feature of stores is that you can also create nested stores to help with setting nested properties.
```jsx
const [store, setStore] = createStore({
@@ -220,24 +216,20 @@ This separation facilitates the tracking and control of the components that are
])
```
- Changes made through `setUsers` will update the `store.users` property and reading `users` from this derived store will also be in sync with the values from `store.users`.
- Note that the above relies on `store.users` to be set already in the existing store.
+Changes made through `setUsers` will update the `store.users` property and reading `users` from this derived store will also be in sync with the values from `store.users`.
+
+Note that the above relies on `store.users` to be set already in the existing store.
:::
## Path syntax flexibility
-Modifying a store using this method is referred to as "path syntax."
-In this approach, the initial arguments are used to specify the keys that lead to the target value you want to modify, while the last argument provides the new value.
+Modifying a store using this method is referred to as "path syntax." In this approach, the initial arguments are used to specify the keys that lead to the target value you want to modify, while the last argument provides the new value.
-String keys are used to precisely target particular values with path syntax.
-By specifying these exact key names, you can directly retrieve the targeted information.
-However, path syntax goes beyond string keys and offers more versatility when accessing targeted values.
+String keys are used to precisely target particular values with path syntax. By specifying these exact key names, you can directly retrieve the targeted information. However, path syntax goes beyond string keys and offers more versatility when accessing targeted values.
-Instead of employing the use of just string keys, there is the option of using an array of keys.
-This method grants you the ability to select multiple properties within the store, facilitating access to nested structures.
-Alternatively, you can use filtering functions to access keys based on dynamic conditions or specific rules.
+Instead of employing the use of just string keys, there is the option of using an array of keys. This method grants you the ability to select multiple properties within the store, facilitating access to nested structures. Alternatively, you can use filtering functions to access keys based on dynamic conditions or specific rules.
[
@@ -265,7 +255,7 @@ setStore("users", (otherUsers) => [
location: "Nigeria",
loggedIn: false,
},
-])
+]);
// can become
@@ -274,147 +264,127 @@ setStore("users", store.users.length, {
username: "michael584",
location: "Nigeria",
loggedIn: false,
-})
+});
```
### Modifying multiple elements
-With path syntax, you can target a subset of elements of an array,
-or properties of an object, by specifying an array or range of indices.
+With path syntax, you can target a subset of elements of an array, or properties of an object, by specifying an array or range of indices.
-The most general form is to specify an array of values.
-For example, if `store.users` is an array of objects,
-you can set the `loggedIn` property of several indices at once like so:
+The most general form is to specify an array of values. For example, if `store.users` is an array of objects, you can set the `loggedIn` property of several indices at once like so:
```jsx
-setStore("users", [2, 7, 10], "loggedIn", false)
+setStore("users", [2, 7, 10], "loggedIn", false);
// equivalent to (but more efficient than):
-setStore("users", 2, "loggedIn", false)
-setStore("users", 7, "loggedIn", false)
-setStore("users", 10, "loggedIn", false)
+setStore("users", 2, "loggedIn", false);
+setStore("users", 7, "loggedIn", false);
+setStore("users", 10, "loggedIn", false);
```
-This array syntax also works for object property names.
-For example, if `store.users` is an object mapping usernames to objects,
-you can set the `loggedIn` property of several users at once like so:
+This array syntax also works for object property names. For example, if `store.users` is an object mapping usernames to objects, you can set the `loggedIn` property of several users at once like so:
```jsx
-setStore("users", ["me", "you"], "loggedIn", false)
+setStore("users", ["me", "you"], "loggedIn", false);
// equivalent to (but more efficient than):
-setStore("users", ["me"], "loggedIn", false)
-setStore("users", ["you"], "loggedIn", false)
+setStore("users", ["me"], "loggedIn", false);
+setStore("users", ["you"], "loggedIn", false);
```
-For arrays specifically, you can specify a range of indices via an object
-with `from` and `to` keys (both of which are inclusive).
-For example, assuming `store.users` is an array again,
-you can set the `loggedIn` state for all users except index 0 as follows:
+For arrays specifically, you can specify a range of indices via an object with `from` and `to` keys (both of which are inclusive). For example, assuming `store.users` is an array again, you can set the `loggedIn` state for all users except index 0 as follows:
```jsx
-setStore("users", { from: 1, to: store.users.length - 1 }, "loggedIn", false)
+setStore("users", { from: 1, to: store.users.length - 1 }, "loggedIn", false);
// equivalent to (but more efficient than):
for (let i = 1; i <= store.users.length - 1; i++) {
- setStore("users", i, "loggedIn", false)
+ setStore("users", i, "loggedIn", false);
}
```
-You can also include a `by` key in a range object to specify a step size,
-and thereby update a regular subset of elements.
-For example, you can set the `loggedIn` state for even-indexed users like so:
+You can also include a `by` key in a range object to specify a step size, and thereby update a regular subset of elements. For example, you can set the `loggedIn` state for even-indexed users like so:
```jsx
-setStore("users", { from: 0, to: store.users.length - 1, by: 2 }, "loggedIn", false)
+setStore(
+ "users",
+ { from: 0, to: store.users.length - 1, by: 2 },
+ "loggedIn",
+ false
+);
// equivalent to (but more efficient than):
for (let i = 1; i <= store.users.length - 1; i += 2) {
- setStore("users", i, "loggedIn", false)
+ setStore("users", i, "loggedIn", false);
}
```
-Multi-setter syntax differs from the "equivalent" code in one key way:
-a single store setter call automatically gets wrapped in a
-[`batch`](/reference/reactive-utilities/batch), so all the elements update
-at once before any downstream effects are triggered.
+Multi-setter syntax differs from the "equivalent" code in one key way: a single store setter call automatically gets wrapped in a [`batch`](/reference/reactive-utilities/batch), so all the elements update at once before any downstream effects are triggered.
### Dynamic value assignment
-Path syntax also provides a way to set values within an array using functions instead of static values.
-These functions receive the old value as an argument, allowing you to compute the new value based on the existing one.
-This dynamic approach is particularly useful for complex transformations.
+Path syntax also provides a way to set values within an array using functions instead of static values. These functions receive the old value as an argument, allowing you to compute the new value based on the existing one. This dynamic approach is particularly useful for complex transformations.
```jsx
-setStore("users", 3, "loggedIn" , (loggedIn) => !loggedIn)
+setStore("users", 3, "loggedIn", (loggedIn) => !loggedIn);
```
### Filtering values
-In scenarios where you want to update elements in an array based on a specific condition, you can pass a function as an argument.
-This function will act as a filter, allowing you to select elements that satisfy the condition.
-It receives the old value and index as arguments, providing the flexibility to make conditional updates.
+In scenarios where you want to update elements in an array based on a specific condition, you can pass a function as an argument. This function will act as a filter, allowing you to select elements that satisfy the condition. It receives the old value and index as arguments, providing the flexibility to make conditional updates.
```jsx
-setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
+setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false);
```
In addition to [`.startsWith`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), you can use other array methods like [`.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) to filter for the values that you need.
## Modifying objects
-When using store setters to modify objects, if a new value is an object, it will be shallow merged with the existing value.
-What this refers to is that the properties of the existing object will be combined with the properties of the "new" object you are setting, updating any overlapping properties with the values from the new object.
+When using store setters to modify objects, if a new value is an object, it will be shallow merged with the existing value. What this refers to is that the properties of the existing object will be combined with the properties of the "new" object you are setting, updating any overlapping properties with the values from the new object.
What this means, is that you can directly make the change to the store _without_ spreading out properties of the existing user object.
```jsx
setStore("users", 0, {
id: 109,
-})
+});
// is equivalent to
setStore("users", 0, (user) => ({
...user,
id: 109,
-}))
+}));
```
## Store utilities
### Store updates with `produce`
-Rather than directly modifying a store with setters, Solid has the `produce` utility.
-This utility provides a way to work with data as if it were a [mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable) JavaScript object.
-`produce` also provides a way to make changes to multiple properties at the same time which eliminates the need for multiple setter calls.
+Rather than directly modifying a store with setters, Solid has the `produce` utility. This utility provides a way to work with data as if it were a [mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable) JavaScript object. `produce` also provides a way to make changes to multiple properties at the same time which eliminates the need for multiple setter calls.
```jsx
-import { produce } from "solid-js/store"
+import { produce } from "solid-js/store";
// without produce
-setStore("users", 0, "username", "newUsername")
-setStore("users", 0, "location", "newLocation")
+setStore("users", 0, "username", "newUsername");
+setStore("users", 0, "location", "newLocation");
// with produce
setStore(
"users",
0,
produce((user) => {
- user.username = "newUsername"
- user.location = "newLocation"
+ user.username = "newUsername";
+ user.location = "newLocation";
})
-)
+);
```
-`produce` and `setStore` do have distinct functionalities.
-While both can be used to modify the state, the key distinction lies in how they handle data.
-`produce` allows you to work with a temporary draft of the state, apply the changes, then produce a new [immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) version of the store.
-Comparatively, `setStore` provides a more straightforward way to update the store directly, without creating a new version.
+`produce` and `setStore` do have distinct functionalities. While both can be used to modify the state, the key distinction lies in how they handle data. `produce` allows you to work with a temporary draft of the state, apply the changes, then produce a new [immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) version of the store. Comparatively, `setStore` provides a more straightforward way to update the store directly, without creating a new version.
-It's important to note, however, `produce` is specifically designed to work with **arrays** and **objects**.
-Other collection types, such as JavaScript [Sets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), are not compatible with this utility.
+It's important to note, however, `produce` is specifically designed to work with **arrays** and **objects**. Other collection types, such as JavaScript [Sets](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), are not compatible with this utility.
### Data integration with `reconcile`
-When new information needs to be merged into an existing store `reconcile` can be useful.
-`reconcile` will determine the differences between new and existing data and initiate updates only when there are _changed_ values, thereby avoiding unnecessary updates.
+When new information needs to be merged into an existing store `reconcile` can be useful. `reconcile` will determine the differences between new and existing data and initiate updates only when there are _changed_ values, thereby avoiding unnecessary updates.
```jsx
const { createStore, reconcile } from "solid-js/stores"
@@ -428,27 +398,22 @@ setData('animals', reconcile(newData))
```
-In this example, the store will look for the differences between the existing and incoming data sets.
-Consequently, only `'koala'` - the new edition - will cause an update.
+In this example, the store will look for the differences between the existing and incoming data sets. Consequently, only `'koala'` - the new edition - will cause an update.
### Extracting raw data with `unwrap`
-When there is a need for dealing with data outside of a reactive context, the `unwrap` utility offers a way to transform a store to a standard [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object).
-This conversion serves several important purposes.
+When there is a need for dealing with data outside of a reactive context, the `unwrap` utility offers a way to transform a store to a standard [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object). This conversion serves several important purposes.
-Firstly, it provides a snapshot of the current state without the processing overhead associated with reactivity.
-This can be useful in situations where an unaltered, non-reactive view of the data is needed.
-Additionally, `unwrap` provides a means to interface with third-party libraries or tools that anticipate regular JavaScript objects.
-This utility acts as a bridge to facilitate smooth integrations with external components and simplifies the incorporation of stores into various applications and workflows.
+Firstly, it provides a snapshot of the current state without the processing overhead associated with reactivity. This can be useful in situations where an unaltered, non-reactive view of the data is needed. Additionally, `unwrap` provides a means to interface with third-party libraries or tools that anticipate regular JavaScript objects. This utility acts as a bridge to facilitate smooth integrations with external components and simplifies the incorporation of stores into various applications and workflows.
```jsx
-import { createStore, unwrap } from "solid-js/store"
+import { createStore, unwrap } from "solid-js/store";
const [data, setData] = createStore({
animals: ["cat", "dog", "bird", "gorilla"],
-})
+});
-const rawData = unwrap(data)
+const rawData = unwrap(data);
```
To learn more about how to use Stores in practice, visit the [guide on complex state management](/guides/complex-state-management).
diff --git a/src/routes/concepts/understanding-jsx.mdx b/src/routes/concepts/understanding-jsx.mdx
index 357f0d0946..c7a786be60 100644
--- a/src/routes/concepts/understanding-jsx.mdx
+++ b/src/routes/concepts/understanding-jsx.mdx
@@ -3,38 +3,33 @@ title: Understanding JSX
order: 2
---
-JSX is an extension for JavaScript.
-It allows you to write HTML-like code inside your JavaScript file which keeps your rendering logic and content in the same place.
-This provides a concise and readable way to create and represent components.
+JSX is an extension for JavaScript. It allows you to write HTML-like code inside your JavaScript file which keeps your rendering logic and content in the same place. This provides a concise and readable way to create and represent components.
## How Solid uses JSX
Solid was designed to align closely with HTML standards.
```jsx
-const element = ![]()
`, or `
` don't require explicit closure, JSX requires consistent self-closing tags. -This helps to avoid potential rendering issues. +Self-closing tags are a must in JSX. Unlike in HTML, where elements like ``, `![]()
`, or `
` don't require explicit closure, JSX requires consistent self-closing tags. This helps to avoid potential rendering issues. ```jsx
@@ -65,20 +57,15 @@ This helps to avoid potential rendering issues.
### Properties vs. attributes
-HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently.
-Both offer ways to specify configurations or pass information.
-However, HTML is used for standard web content and JSX creates Solid's component logic.
+HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently. Both offer ways to specify configurations or pass information. However, HTML is used for standard web content and JSX creates Solid's component logic.
#### HTML attributes
-[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements.
-They provide additional information about an element to guide its initial behavior and state.
-These attributes are often translated into properties on DOM objects once the browser parses the HTML.
+[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements. They provide additional information about an element to guide its initial behavior and state. These attributes are often translated into properties on DOM objects once the browser parses the HTML.
In JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript:
-- Event listeners such as `onClick` can be in camelCase or lowercase.
- (**Note:** When using ESLint, you will get a warning if you use lowercase.)
+- Event listeners such as `onClick` can be in camelCase or lowercase. (**Note:** When using ESLint, you will get a warning if you use lowercase.)
- In cases where you can dynamically specify a value, you can replace the `"` and `"` with curly braces (`{ }`):
```jsx
@@ -87,8 +74,9 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
```
- :::info
- If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
+:::info
+
+If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
```jsx
-My Element
+ const myElement =My Element
; - return{myElement}
+ return {myElement}
;
}
```
-This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM.
-It can be used multiple times without having to worry about duplicate selectors.
+This lets you create and access DOM elements similar to [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) but without having to wait until it is attached to the DOM. It can be used multiple times without having to worry about duplicate selectors.
-The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure.
-This makes the component's JSX structure more difficult to read and understand.
+The downside of this approach is that it separates the element and any child elements from the rest of the JSX structure. This makes the component's JSX structure more difficult to read and understand.
## Refs in Solid
@@ -46,40 +40,40 @@ function Component() {
My Element
{ - myElement = el // el is created but not yet added to the DOM - }}> +
{ + myElement = el; // el is created but not yet added to the DOM + }} +> My Element
``` :::info -In TypeScript, you must use a definitive assignment assertion. -Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't -confirm it. + +In TypeScript, you must use a definitive assignment assertion. Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't confirm it. ```tsx let myElement!: HTMLDivElement; ``` + ::: ### Signals as refs -[Signals](/concepts/signals) can also be used as refs. -This is useful when you want to access the element directly, but the element may not exist when the component is first rendered, or may be removed from the DOM at some point. +[Signals](/concepts/signals) can also be used as refs. This is useful when you want to access the element directly, but the element may not exist when the component is first rendered, or may be removed from the DOM at some point. ```jsx function App() { - const [show, setShow] = createSignal(false) - const [element, setElement] = createSignal() + const [show, setShow] = createSignal(false); + const [element, setElement] = createSignal(); return (
@@ -89,46 +83,41 @@ function App() {
- )
+ );
}
```
-In this example, the paragraph element is only rendered when the `show` signal is `true`.
-When the component initializes, the paragraph element does not exist, so the `element` variable is not assigned.
-Once the `show` signal is set to `true`, the paragraph element is rendered, and the `element` variable is assigned to the paragraph element.
+In this example, the paragraph element is only rendered when the `show` signal is `true`. When the component initializes, the paragraph element does not exist, so the `element` variable is not assigned. Once the `show` signal is set to `true`, the paragraph element is rendered, and the `element` variable is assigned to the paragraph element.
You can see a detailed view of the ref update lifecycle in this [Solid playground example](https://playground.solidjs.com/anonymous/22a1abfa-a0f5-44a6-bbe6-40387cf63b95).
## Forwarding refs
-Forwarding refs is a technique that allows you to pass a ref from a parent component to a child component.
-This is useful when you want to access the DOM element of a child component from the parent component.
+Forwarding refs is a technique that allows you to pass a ref from a parent component to a child component. This is useful when you want to access the DOM element of a child component from the parent component.
To forward a ref, you need to pass the ref to the child component, and then assign the ref to the child component's element.
-When a child component receives a `ref` attribute from its parent, the `ref` is passed as a callback function.
-This is regardless of whether the parent passed it as a simple assignment or a callback.
+When a child component receives a `ref` attribute from its parent, the `ref` is passed as a callback function. This is regardless of whether the parent passed it as a simple assignment or a callback.
-Once the child component receives the `ref`, it can be assigned to the element that the child component wants to expose through the `ref` attribute.
-To access the `ref` in the child component, it is passed as a prop:
+Once the child component receives the `ref`, it can be assigned to the element that the child component wants to expose through the `ref` attribute. To access the `ref` in the child component, it is passed as a prop:
```tsx
// Parent component
-import { Canvas } from "./Canvas.jsx"
+import { Canvas } from "./Canvas.jsx";
function ParentComponent() {
- let canvasRef
+ let canvasRef;
const animateCanvas = () => {
// Manipulate the canvas using canvasRef...
- }
+ };
return (
This is the ref element
{/* Assign the ref to the canvas element */}
- )
+ );
}
```
-In this example, the `canvas` element is directly assigned the `ref` attribute through the `props.ref` variable.
-This forwards the reference to the parent component, giving it direct access to the `canvas` element.
+In this example, the `canvas` element is directly assigned the `ref` attribute through the `props.ref` variable. This forwards the reference to the parent component, giving it direct access to the `canvas` element.
## Directives
-Directives allow the attachment of reusable behaviours to DOM elements.
-The [`use:`](/reference/jsx-attributes/use) prefix is used to denote these custom directives.
-Unlike props or attributes, directives operate at a lower level through providing fine-grained control over the elements they are attached to.
+Directives allow the attachment of reusable behaviours to DOM elements. The [`use:`](/reference/jsx-attributes/use) prefix is used to denote these custom directives. Unlike props or attributes, directives operate at a lower level through providing fine-grained control over the elements they are attached to.
Directives are like callback refs but they enable two extra features:
@@ -158,15 +144,13 @@ Directives are like callback refs but they enable two extra features:
A directive is essentially a function with a specific signature:
```typescript
-function directive(element: Element, accessor: () => any): void
-
+function directive(element: Element, accessor: () => any): void;
```
- `element`: The DOM element that the directive is applied to.
- `accessor`: A function that gives access to the value(s) passed to the directive.
-The directive functions are called at render time, but are called before the element is added to the DOM.
-Due to this order, elements are fully primed with their attributes, properties, or event listeners, therefore minimizing unexpected behaviors or premature interactions.
+The directive functions are called at render time, but are called before the element is added to the DOM. Due to this order, elements are fully primed with their attributes, properties, or event listeners, therefore minimizing unexpected behaviors or premature interactions.
Within directives, you're able to perform a variety of tasks, including:
diff --git a/src/routes/concepts/signals.mdx b/src/routes/concepts/signals.mdx
index d4558fe66b..8a0dd756b6 100644
--- a/src/routes/concepts/signals.mdx
+++ b/src/routes/concepts/signals.mdx
@@ -3,16 +3,13 @@ title: Signals
order: 2
---
-Signals are the primary means of [managing state](/concepts/intro-to-reactivity#state-management) in your Solid application.
-They provide a way to store and update values, and are the foundation of [reactivity](/concepts/intro-to-reactivity) in Solid.
+Signals are the primary means of [managing state](/concepts/intro-to-reactivity#state-management) in your Solid application. They provide a way to store and update values, and are the foundation of [reactivity](/concepts/intro-to-reactivity) in Solid.
-Signals can be used to represent any kind of state in your application, such as the current user, the current page, or the current theme.
-This can be any value, including primitive values such as strings and numbers, or complex values such as objects and arrays.
+Signals can be used to represent any kind of state in your application, such as the current user, the current page, or the current theme. This can be any value, including primitive values such as strings and numbers, or complex values such as objects and arrays.
## Creating a signal
-You can create a signal by calling the [`createSignal`](/reference/basic-reactivity/create-signal) function, which is imported from `solid-js`.
-This function takes an initial value as an argument, and returns a pair of functions: a **getter** function, and a **setter** function.
+You can create a signal by calling the [`createSignal`](/reference/basic-reactivity/create-signal) function, which is imported from `solid-js`. This function takes an initial value as an argument, and returns a pair of functions: a **getter** function, and a **setter** function.
```jsx
import { createSignal } from "solid-js";
@@ -21,18 +18,17 @@ const [count, setCount] = createSignal(0);
// ^ getter ^ setter
```
- :::info
- The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
+:::info
+
+The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
-This lets you extract values from the array.
-In the context of `createSignal`, the first value is the getter function, and the second value is the setter function.
+This lets you extract values from the array. In the context of `createSignal`, the first value is the getter function, and the second value is the setter function.
:::
## Accessing values
-The getter function returned by `createSignal` is used to access the value of the signal.
-You call this function with no arguments to get the current value of the signal:
+The getter function returned by `createSignal` is used to access the value of the signal. You call this function with no arguments to get the current value of the signal:
```jsx
console.log(count()); // output: 0
@@ -40,8 +36,7 @@ console.log(count()); // output: 0
## Updating values
-The setter function returned by `createSignal` is used to update the value of the signal.
-This function takes an argument that represents the new value of the signal:
+The setter function returned by `createSignal` is used to update the value of the signal. This function takes an argument that represents the new value of the signal:
```jsx
setCount(count() + 1);
@@ -59,9 +54,7 @@ console.log(count()); // output: 1
## Reactivity
-Signals are reactive, which means that they automatically update when their value changes.
-When a signal is called within a [tracking scope](/concepts/intro-to-reactivity#tracking-changes), the signal adds the dependency to a list of subscribers.
-Once a signal's value changes, it notifies all of its dependencies of the change so they can re-evaluate their values and update accordingly.
+Signals are reactive, which means that they automatically update when their value changes. When a signal is called within a [tracking scope](/concepts/intro-to-reactivity#tracking-changes), the signal adds the dependency to a list of subscribers. Once a signal's value changes, it notifies all of its dependencies of the change so they can re-evaluate their values and update accordingly.
```jsx
function Counter() {
@@ -80,10 +73,10 @@ function Counter() {
```
:::info
-A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
-Both functions subscribe to the signals accessed within them, establishing a dependency relationship.
-Once this relationship is established, the function is notified whenever the signal changes.
+A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect) or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
+
+Both functions subscribe to the signals accessed within them, establishing a dependency relationship. Once this relationship is established, the function is notified whenever the signal changes.
:::
diff --git a/src/routes/concepts/stores.mdx b/src/routes/concepts/stores.mdx
index 20ada72ab5..277a690f01 100644
--- a/src/routes/concepts/stores.mdx
+++ b/src/routes/concepts/stores.mdx
@@ -3,19 +3,16 @@ title: Stores
order: 6
---
-Similar to [signals](/concepts/signals), stores are a state management primitive.
-However, while signals manage a single piece of state, stores create a centralized location to reduce code redundancy.
-Within Solid, these stores can spawn a collection of reactive signals, each corresponding to a particular property which can be useful when working with complex state.
+Similar to [signals](/concepts/signals), stores are a state management primitive. However, while signals manage a single piece of state, stores create a centralized location to reduce code redundancy. Within Solid, these stores can spawn a collection of reactive signals, each corresponding to a particular property which can be useful when working with complex state.
## Creating a store
Stores can manage many data types, including: objects, arrays, strings, and numbers.
-Using JavaScript's [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) mechanism, reactivity extends beyond just the top-level objects or arrays.
-With stores, you can now target nested properties and elements within these structures to create a dynamic tree of reactive data.
+Using JavaScript's [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) mechanism, reactivity extends beyond just the top-level objects or arrays. With stores, you can now target nested properties and elements within these structures to create a dynamic tree of reactive data.
```jsx
-import { createStore } from "solid-js/store"
+import { createStore } from "solid-js/store";
// Initialize store
const [store, setStore] = createStore({
@@ -40,7 +37,7 @@ const [store, setStore] = createStore({
loggedIn: true,
},
],
-})
+});
```
## Accessing store values
@@ -48,16 +45,14 @@ const [store, setStore] = createStore({
Store properties can be accessed directly from the state proxy through directly referencing the targeted property:
```jsx
-console.log(store.userCount) // Outputs: 3
+console.log(store.userCount); // Outputs: 3
```
-Accessing stores within a tracking scope follows a similar pattern to signals.
-While signals are created using the [`createSignal`](/reference/basic-reactivity/create-signal) function and require calling the signal function to access their values, store values can be directly accessed without a function call.
-This provides access to the store's value directly within a tracking scope:
+Accessing stores within a tracking scope follows a similar pattern to signals. While signals are created using the [`createSignal`](/reference/basic-reactivity/create-signal) function and require calling the signal function to access their values, store values can be directly accessed without a function call. This provides access to the store's value directly within a tracking scope:
```jsx
const App = () => {
- const [mySignal, setMySignal] = createSignal("This is a signal.")
+ const [mySignal, setMySignal] = createSignal("This is a signal.");
const [store, setStore] = createStore({
userCount: 3,
users: [
@@ -80,24 +75,22 @@ const App = () => {
loggedIn: true,
},
],
- })
+ });
return (
Hello, {store.users[0].username}
{/* Accessing a store value */} {mySignal()} {/* Accessing a signal */}I'm JSX!!
+const element =I'm JSX!!
; ``` -It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools. -Solid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements. -This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`): +It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools. Solid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements. This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`): ```jsx const Component = () => { - const animal = { breed: "cat", name: "Midnight" } + const animal = { breed: "cat", name: "Midnight" }; return (I have a {animal.breed} named {animal.name}!
- ) -} + ); +}; ``` This means JavaScript content can be rendered on web pages based on an application's state or logic. -Additionally, Solid's [reactive](/concepts/intro-to-reactivity) system introduces [fine-grained reactivity](/advanced-concepts/fine-grained-reactivity) with JSX. -This updates only the necessary parts of the DOM when changes occur in the underlying state. +Additionally, Solid's [reactive](/concepts/intro-to-reactivity) system introduces [fine-grained reactivity](/advanced-concepts/fine-grained-reactivity) with JSX. This updates only the necessary parts of the DOM when changes occur in the underlying state. ## Using JSX in Solid @@ -43,21 +38,18 @@ This updates only the necessary parts of the DOM when changes occur in the under Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element. :::advanced -When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file. -Static elements are processed differently from dynamic ones, which might change based on data or user actions. -For dynamic elements, special markers are added for better handling during rendering. + +When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file. Static elements are processed differently from dynamic ones, which might change based on data or user actions. For dynamic elements, special markers are added for better handling during rendering. Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates. + ::: -JSX maintains the familiar nested, tree-like structure found in HTML. -As a result, parent-child relationships between elements become easier to follow. +JSX maintains the familiar nested, tree-like structure found in HTML. As a result, parent-child relationships between elements become easier to follow. ### Close all tags -Self-closing tags are a must in JSX. -Unlike in HTML, where elements like ``, `` don't require explicit closure, JSX requires consistent self-closing tags. -This helps to avoid potential rendering issues. +Self-closing tags are a must in JSX. Unlike in HTML, where elements like ``, `
` don't require explicit closure, JSX requires consistent self-closing tags. This helps to avoid potential rendering issues. ```jsx
@@ -65,20 +57,15 @@ This helps to avoid potential rendering issues.
### Properties vs. attributes
-HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently.
-Both offer ways to specify configurations or pass information.
-However, HTML is used for standard web content and JSX creates Solid's component logic.
+HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently. Both offer ways to specify configurations or pass information. However, HTML is used for standard web content and JSX creates Solid's component logic.
#### HTML attributes
-[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements.
-They provide additional information about an element to guide its initial behavior and state.
-These attributes are often translated into properties on DOM objects once the browser parses the HTML.
+[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements. They provide additional information about an element to guide its initial behavior and state. These attributes are often translated into properties on DOM objects once the browser parses the HTML.
In JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript:
-- Event listeners such as `onClick` can be in camelCase or lowercase.
- (**Note:** When using ESLint, you will get a warning if you use lowercase.)
+- Event listeners such as `onClick` can be in camelCase or lowercase. (**Note:** When using ESLint, you will get a warning if you use lowercase.)
- In cases where you can dynamically specify a value, you can replace the `"` and `"` with curly braces (`{ }`):
```jsx
@@ -87,8 +74,9 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
```
- :::info
- If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
+:::info
+
+If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
```jsx
-```bash frame="none"
-yarn add --dev typescript
-```
-
+```bash frame="none" yarn add --dev typescript ```
-
-```bash frame="none"
-pnpm add --save-dev typescript
-```
-
+```bash frame="none" pnpm add --save-dev typescript ```
```bash frame="none"
@@ -87,17 +73,9 @@ npx tsc --init
```
-
-```bash frame="none"
-yarn dlx tsc --init
-```
-
+```bash frame="none" yarn dlx tsc --init ```
-
-```bash frame="none"
-pnpm tsc --init
-```
-
+```bash frame="none" pnpm tsc --init ```
```bash frame="none"
@@ -157,7 +135,8 @@ function MyJsComponent() {
}
```
-:::info
+:::info
+
If you wish to change the entry point file from `index.jsx` to `index.tsx`, you need to modify the `src` attribute in `