React Function components in combination with states and (arrow)functions

Question

I learned the basics of JavaScript and React and today I was revisiting my React learning. To my surprise all class-based components are a goner and everything is a function component now. This confuses me a lot because:

I am used to writing:

state = {
todos = [ {sometodo: content}, {sometodo: content}]
}

someFunction = (para) => {
do something
}

but now I apparently have to write:

function App() {

  const [todos, setTodos ] = useState([
      {id: 1, content: 'buy some milk'},
      {id: 2, content: 'play mario kart'}
  ]);

  const deleteTodo = (id) => {
    console.log(id);
  }

In the essence, I don't mind because I understand Reacts will to innovate. But I was wondering if throwing a const everywhere is the right way to code this. I honestly just need some confirmation if I am doing this right? Cause if I look for arrowfunctions in React, all I get is the old pages with classbased components.

Oh and a sidequestion: Do you now just make a function component of everything?

Thanks in advance!

I'm not sure what you're asking. This is covered in the React docs. — Dave Newton
– Dave Newton, Commented Mar 9, 2020 at 16:05
FYI: you could create a function component with an arrow function. It doesnt have to include the function keyword. — Sagi Rika
– Sagi Rika, Commented Mar 9, 2020 at 16:12
class-based components aren't gone. it's just that functional components have become more popular. Both have their advantages and disadvantages. — Mark
– Mark, Commented Mar 9, 2020 at 16:16
"...now I apparently have to write" - NO, you don't have to start writing your components as function components, class-based components are just fine. Also, not sure what you mean by "looking for arrow functions in React"? Arrow functions are a JavaScript feature, React has nothing to do with arrow functions - use them in your React code where appropriate. — goto
– goto, Commented Mar 9, 2020 at 16:19

Seth Lutske · Accepted Answer · 2020-03-09 16:10:00Z

1

Class components are still very much alive and in use. Functional components have become more popular recently with the intruduction of Hooks. useState is a hook, and allows you to turn a functional component into a stateful one, without having to convert to a class component. So you can write things much cleaner with functional components. I personally still use class components a lot, especially for larger, beefier components.

I don't see anything incorrect with what you wrote at all. (Except it should be state: [...] in your first line of code, not state = [...])

answered Mar 9, 2020 at 16:10

Seth Lutske

11k9 gold badges57 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pgreat Over a year ago

After waht you said I decided to look it up, and React said themselves they wont be removing classes. So for my current project I am going to use the new hook-style (so I am familiar with it) and in the future I will make it depend on the situation which style I will use. I personally prefer the classed based components because It just looks so much more cleaner in my opinion. But it might change if the project is bigger and the functions need more indepth power, hence why react made these hooks.

Collectives™ on Stack Overflow

React Function components in combination with states and (arrow)functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related