moved state and hooks docs together into one category

website/docs/concepts/function-components/hooks/introduction.mdx

@@ -1,15 +1,18 @@
 ---
-title: 'Hooks'
+title: 'Storing state with Hooks'
 slug: /concepts/function-components/hooks
 ---
 
 ## Hooks
 
 Hooks are functions that let you store state and perform side effects.
 
-Yew comes with a few pre-defined hooks. You can also create your own or discover many [community-made hooks](/community/awesome#hooks).
+Yew comes with a few [predefined hooks](/concepts/function-components/hooks/predefined-hooks).
+There are cases where you want to define your own Hooks to encapsulate potentially stateful logic from a component into reusable functions.
+See the [Defining custom hooks](concepts/function-components/hooks/custom-hooks.mdx#defining-custom-hooks) section for more information.
+You can also discover many [community-made hooks](/community/awesome#hooks).
 
-## Rules of hooks
+## Rules for hooks
 
 1. A hook function name always has to start with `use_`
 2. Hooks can only be used in the following locations:
@@ -21,31 +24,7 @@ Yew comes with a few pre-defined hooks. You can also create your own or discover
 
 These rules are enforced by either compile-time or run-time errors.
 
-### Pre-defined Hooks
-
-Yew comes with the following predefined Hooks:
-
--   `use_state`
--   `use_state_eq`
--   `use_memo`
--   `use_callback`
--   `use_mut_ref`
--   `use_node_ref`
--   `use_reducer`
--   `use_reducer_eq`
--   `use_effect`
--   `use_effect_with`
--   `use_context`
--   `use_force_update`
-
-The documentation for these hooks can be found in the [Yew API docs](https://yew-rs-api.web.app/next/yew/functional/)
-
-### Custom Hooks
-
-There are cases where you want to define your own Hooks to encapsulate potentially stateful logic from a component into reusable functions.
-See the [Defining custom hooks](concepts/function-components/hooks/custom-hooks.mdx#defining-custom-hooks) section for more information.
-
 ## Further reading
 
--   The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
-    These are not the same as Yew's hooks, but the underlying concept is similar.
+The React documentation has a section on [React hooks](https://reactjs.org/docs/hooks-intro.html).
+These are not the same as Yew's hooks, but the underlying concept is similar.

website/docs/concepts/function-components/state.mdx → website/docs/concepts/function-components/hooks/predefined-hooks.mdx

@@ -1,10 +1,37 @@
 ---
-title: 'State'
+title: 'Predefined Hooks'
 ---
 
-## General view of how to store state
+## Example
 
-This table can be used as a guide when deciding what state-storing type fits best for your use case:
+Here is a simple example of using a Hook to store the state of a counter:
+
+```rust
+use yew::prelude::*;
+
+#[function_component(UseState)]
+fn state() -> Html {
+    let counter = use_state(|| 0);    // initialize the counter to 0
+    let onclick = {
+        let counter = counter.clone();
+        Callback::from(move |_| counter.set(*counter + 1))    // set the counter to a new state
+    };
+
+    html! {
+        <div>
+            <button {onclick}>{ "Increment value" }</button>
+            <p>
+                <b>{ "Current value: " }</b>
+                { *counter }    // dereference to read the counter value
+            </p>
+        </div>
+    }
+}
+```
+
+## Predefined Hooks
+
+Yew comes with the following predefined Hooks:
 
 | Hook                     | Type                       | Rerender when?               | Scope               |
 | ------------------------ | -------------------------- | ---------------------------- | ------------------- |
@@ -15,6 +42,11 @@ This table can be used as a guide when deciding what state-storing type fits bes
 | [use_memo]               | `Deps -> T`                | dependencies changed         | component instance  |
 | [use_callback]           | `Deps -> Callback<E>`      | dependencies changed         | component instance  |
 | [use_mut_ref]            | `T`                        | -                            | component instance  |
+| [use_node_ref]           |
+| [use_effect]             |
+| [use_effect_with]        |
+| [use_context]            |
+| [use_force_update]       |
 | a static global variable | `T`                        | -                            | global, used by all |
 
 [use_state]: https://yew-rs-api.web.app/next/yew/functional/fn.use_state.html
@@ -24,3 +56,12 @@ This table can be used as a guide when deciding what state-storing type fits bes
 [use_memo]: https://yew-rs-api.web.app/next/yew/functional/fn.use_memo.html
 [use_callback]: https://yew-rs-api.web.app/next/yew/functional/fn.use_callback.html
 [use_mut_ref]: https://yew-rs-api.web.app/next/yew/functional/fn.use_mut_ref.html
+[use_node_ref]: https://yew-rs-api.web.app/next/yew/functional/fn.use_node_ref.html
+[use_effect]: https://yew-rs-api.web.app/next/yew/functional/fn.use_effect.html
+[use_effect_with]: https://yew-rs-api.web.app/next/yew/functional/fn.use_effect_with.html
+[use_context]: https://yew-rs-api.web.app/next/yew/functional/fn.use_context.html
+[use_force_update]: https://yew-rs-api.web.app/next/yew/functional/fn.use_force_update.html
+
+## Further reading
+
+The documentation and more examples for these hooks can be found in the [Yew API docs](https://yew-rs-api.web.app/next/yew/functional/).

website/sidebars/docs.js

@@ -67,11 +67,11 @@ module.exports = {
                                 id: 'concepts/function-components/hooks/introduction',
                             },
                             items: [
+                                'concepts/function-components/hooks/predefined-hooks',
                                 'concepts/function-components/hooks/custom-hooks',
                             ],
                         },
                         'concepts/function-components/node-refs',
-                        'concepts/function-components/state',
                         'concepts/function-components/communication',
                         'concepts/function-components/generics',
                     ],