---
title: "Function Components"
sidebar_label: Introduction
description: "Introduction to function components "
---

Function components are a simplified version of normal components. They consist of a single function
that receives props and determines what should be rendered by returning `Html`. Basically, it's a
component that's been reduced to just the `view` method. On its own that would be quite limiting
because you can only create pure components, but that's where Hooks come in. Hooks allow function
components to maintain their own internal state and use other Yew features without needing to manually
implement the `Component` trait.

## Creating function components

The easiest way to create a function component is to add the [`#[function_component]`](./../function-components/attribute.mdx) attribute to a function.

```rust
use yew::{function_component, html};

#[function_component(HelloWorld)]
fn hello_world() -> Html {
    html! { "Hello world" }
}
```

### Under the hood

There are two parts to how Yew implements function components.

The first part is the `FunctionProvider` trait which is analogous to the `Component` trait, except
that it only has a single method (called `run`). The second part is the `FunctionComponent` struct
which wraps types implementing `FunctionProvider` and implements `Component`.

The `#[function_component]` attribute is a procedural macro which automatically implements
`FunctionProvider` for you and exposes it wrapped in `FunctionComponent`.

### Hooks

Hooks are functions that let you "hook into" components' state and/or lifecycle and perform
actions. Yew comes with a few pre-defined Hooks. You can also create your own.

#### Pre-defined Hooks

Yew comes with the following predefined Hooks:
- [`use_state`](./../function-components/pre-defined-hooks.mdx#use_state)
- [`use_state_eq`](./../function-components/pre-defined-hooks.mdx#use_state_eq)
- [`use_ref`](./../function-components/pre-defined-hooks.mdx#use_ref)
- [`use_mut_ref`](./../function-components/pre-defined-hooks.mdx#use_mut_ref)
- [`use_node_ref`](./../function-components/pre-defined-hooks.mdx#use_node_ref)
- [`use_reducer`](./../function-components/pre-defined-hooks.mdx#use_reducer)
- [`use_reducer_eq`](./../function-components/pre-defined-hooks.mdx#use_reducer_eq)
- [`use_effect`](./../function-components/pre-defined-hooks.mdx#use_effect)
- [`use_effect_with_deps`](./../function-components/pre-defined-hooks.mdx#use_effect_with_deps)
- [`use_context`](./../function-components/pre-defined-hooks.mdx#use_context)

#### Custom Hooks

There are cases where you want to define your own Hooks for reasons. Yew allows you to define your own Hooks which lets you extract your potentially stateful logic from the component into reusable functions.
See the [Defining custom hooks](./../function-components/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 exactly the same as Yew's hooks, but the underlying concept is similar.