У чему се разликују props и стање у React-у?

Пропси (props) и стање (state) су два кључна механизма за управљање подацима у React компонентама.

Пропси:

• Преносе се од родитељске до дечије компоненте.
• Јесу неизменљиви (immutable) унутар дечије компоненте.
• Омогућавају компонентама да комуницирају међусобно.
• Одређују изглед или понашање компоненте на основу улазних података.

Стање:

• Припада одређеној компоненти и управља њиме.
• Је променљиво (mutable) унутар компоненте.
• Представља податке који могу да се мењају током времена и утичу на рендеровање компоненте.
• Промена стања изазива поновно рендеровање компоненте и њених потомака.

Основне разлике могу се представити у виду табеле:

Карактеристика	Пропси	Стање
Извор	Родитељска компонента	Самa компонента
Променљивост	Неизменљиви	Променљиво
Управљање	Преносе се споља	Управља се унутар компоненте
Намена	Приказ података споља, подешавање	Управљање унутрашњим стањем компоненте
Промена доводи до	Поновног рендеровања при промени у родитељу	Поновног рендеровања при промени у тренутној компоненти

Пример коришћења пропса:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Поздрав од родитеља!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Пренос пропса "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Коришћење пропса "text" */}
  );
}

export default ChildComponent;

Пример коришћења стања:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Инициализација стања "count"

  const increment = () => {
    setCount(count + 1); // Промена стања
  };

  return (
    <div>
      <p>Бројач: {count}</p>
      <button onClick={increment}>Повећај</button>
    </div>
  );
}

export default Counter;