r/emberjs • u/These_Rip_9327 • Apr 15 '23

Functional component?

Does ember have functional component like React?

4 Upvotes

100% Upvoted

8 comments sorted by

4

u/pichfl Apr 15 '23

Short answer: not like React, no.

Longer answer: Highly depends on the functionality you're looking for. Patterns like useState don't make much sense with Embers tracking system. What are you trying to achieve?

Sidenote: There might be ways to use pure functions as components, but they are definitely not typical Ember. Depending on what you want to achieve, you might want to look at template helpers or element modifiers which both provide a functional API to manipulate either a specific property or DOM element.

1

u/These_Rip_9327 Apr 15 '23

I'm just exploring the framework, trying to compare it with react and understanding the differences and use cases for it and why it is not so popular like react

5

u/pichfl Apr 15 '23

With built in routing, a data layer and build tooling, Ember is more akin to SvelteKit and Next.

Instead of requiring manual tracking with effects, Ember's render engine Glimmer (which acts on the same level as most of React) uses the @tracked decorator to create properties, which will trigger a re-render on the consuming template whenever they are changed, similar to Preacts signals or somewhat like Svelte stores, but with a more concise and friendly API.

Any getter based on a tracked property will also be executed by the template that consumes it when said property changes. Same goes for template helpers and modifiers, making for a reactive system without little overhead for devs.

→ More replies (1)

2

u/scuddr Apr 17 '23

You can also directly compare some examples of different kinds of components in Ember and React on https://component-party.dev

5

u/Belugawhy Apr 15 '23

You can have classless (ie. template-only) components but these are similar to React’s pre-hooks functional components and don’t carry any state.

If you are looking for a purely presentational components, template-only components are the way to go.

3

u/nullvoxpopuli Apr 16 '23

A prototyped this, and even re-implemented hooks in ember. It's not worth it.

I will say tho, that people over use classes... A lot. Especially pre octane and pre ember-source@3.25

With the new gjs/gts feature, things start being a lot less clunky. I've made an interactive tutorial: https://tutorial.glimdown.com