Update island doc.

docs/developing/islands/en.md

@@ -1,6 +1,6 @@
 ---
 description: Client-side Interactivity.
-since: 1.1.0
+since: 1.0.0
 ---
 
 One of the reasons deco is fast is our edge first approach to creating websites. This means that all code you write runs on our servers instead of running on slow, inconsitent user devices (browser). However, sometimes we need to provide extra interactivity to our websites, like adding `onClick`, `useState` or `useEffect` event handlers. 
@@ -74,11 +74,36 @@ Islands are Preact components. This means they accept `props`. However, these va
 
 Complex objects such as Date, functions, and custom classes are not accepted as islands props.
 
+# Using Signals Instead of State
+
+`useState` requires working with a separate function for value updates. Preact also uses [`Signals`](https://preactjs.com/guide/v10/signals/) for handling state. A `signal` has a reference that holds a value, but it also has a `.value` attribute that allows updating this value.
+
+Within a component, if the state is only used locally, you can use the `useSignal` hook to create these elements that can be used in the function body or in the JSX returned, as in the example below.
+
+```tsx
+import { useSignal } from "@preact/signals";
+
+export default function Counter() {
+  const count = useSignal(0)
+
+  return (
+    <div>
+      <button onClick={() => count.value-- }>
+        -
+      </button>
+      <span>{count}</span>
+      <button onClick={() => count.value++ }>
+        +
+      </button>
+    </div>
+  )
+}
+
 # Sharing state among islands.
 
 In normal Preact development, sharing state between components is usually done via the [Context](https://preactjs.com/guide/v10/context/) API. This works fine for a full client-side application. However, since we are using islands architecture, sharing state among islands require a new approach.
 
-Preact introduced a new concept called [Signals](https://preactjs.com/guide/v10/signals/). Signals are a great way of sharing state between islands, since one can publish and subscribe for change events in a concise API. 
+Signals are also a great way of sharing state between islands, since one can publish and subscribe for change events in a concise API. 
 
 To use signals, 
 ```tsx 
@@ -110,8 +135,5 @@ To define side-effects over signal changes, use the `effect`, `batch`, `computed
 
 Making a component an island will at least double its size in bytes. The server renders the HTML for this element and sends it to the browser, but it also sends essentially the same HTML plus the JS to be injected on the client side. Therefore, try to create only the necessary islands, as they make the rendering process more resource-intensive.
 
-To learn more about deco's rendering process and receive some tips on implementing common design patterns:
-
-- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)
-- TODO: [Understanding deco rendering pipeline](TODO)
-- TODO: [Recipes: islands](TODO)
+Futher read:
+- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)

docs/developing/islands/pt.md

@@ -1,6 +1,6 @@
 ---
 description: Adicionando interatividade à página.
-since: 1.1.0
+since: 1.0.0
 ---
 
 Uma das razões pelas quais o Deco é rápido é a nossa abordagem centrada no servidor para criar sites. Isso significa que todo o código que você escreve é executado em nossos servidores, em vez de ser executado em dispositivos de usuário lentos e inconsistentes (navegador). No entanto, às vezes precisamos fornecer interatividade extra aos nossos sites, como adicionar manipuladores de eventos `onClick`, `useState` ou `useEffect`. 
@@ -73,11 +73,37 @@ As islands são componentes do Preact. Isso significa que elas aceitam `props`.
 
 Objetos complexos como `Date`, funções e classes personalizadas não são aceitos como props de islands.
 
+# Utilizando signals no lugar de state
+
+O `useState` exige que se trabalhe com uma função a parte para a atualização de valor. Preact, e outros sistemas, oferecem [`Signals`](https://preactjs.com/guide/v10/signals/) para tratamento de estado até do `useState`. Um `signal` tem uma referência que tem valor mas que também tem um atributo `.value` que permite atualizar esse valor.
+
+Dentro de um componente, caso o estado seja só usado localmente, é possível fazer uso do hook `useSignal` para criar esses elementos que podem ser utilizado no corpo da função ou no próprio JSX retornado, como no exemplo abaixo.
+
+```tsx
+import { useSignal } from "@preact/signals";
+
+export default function Counter() {
+  const count = useSignal(0)
+
+  return (
+    <div>
+      <button onClick={() => count.value-- }>
+        -
+      </button>
+      <span>{count}</span>
+      <button onClick={() => count.value++ }>
+        +
+      </button>
+    </div>
+  )
+}
+```
+
 # Compartilhando estado entre as islands
 
 No desenvolvimento normal do Preact, o compartilhamento de estado entre componentes geralmente é feito por meio da API [Context](https://preactjs.com/guide/v10/context/). Isso funciona bem para um aplicativo de lado do cliente completo. No entanto, como estamos usando a arquitetura de islands, compartilhar estado entre as islands requer uma nova abordagem.
 
-O Preact introduziu um novo conceito chamado [Signals](https://preactjs.com/guide/v10/signals/). Os signals são uma ótima maneira de compartilhar estado entre as islands, pois é possível publicar e se inscrever em eventos de alteração em uma API concisa.
+Os signals são uma ótima maneira de compartilhar estado entre as islands, pois é possível publicar e se inscrever em eventos de alteração em uma API concisa.
 
 Para usar signals, importe:
 ```tsx 
@@ -109,8 +135,5 @@ Para definir efeitos colaterais em mudanças de signal, use as operações `effe
 
 Ao transformar um componente em uma island, pelo menos o tamanho dele em bytes será duplicado. O servidor renderiza o HTML para esse elemento e o envia para o navegador, mas também envia basicamente o mesmo HTML mais o JS a ser injetado no lado do cliente. Portanto, tente criar apenas as islands necessárias, pois elas tornam o processo de renderização mais intensivo em
 
-Para aprender mais sobre o processo de renderização na deco e receber dicas de como implementar padrões de comuns de design:
-
-- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)
-- TODO: [Understanding deco rendering pipeline](TODO)
-- TODO: [Recipes: islands](TODO)
+Leitura complementar:
+- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)