Should i use State or Props in this simple ReactJS page?

Question

i'm rebuilding my portfolio with ReactJS as i'm learning this new language and i have 1 question. Should i use state or props only in a website where no content will need to be updated?

This is my main class:

class App extends Component {

  state = {
    name: 'My name',
    job: 'Desenvolvedor Web'
  }

  render() {
    return (
      <div className="App">
        <Header name={this.state.name} job={this.state.job}/>
      </div>
    );
  }
}

And this is my Header.js

const Header = (props) => {
    return(
        <div className="Header">
            <div className="conteudo text-center">
                <img src="" className="rounded img-circle"/>
                <h1>{props.name}</h1>
                <h2>{props.job}</h2>
        </div>
)
}

I guess my entire one page portfolio will follow this structure path, with not a big use of handles and changes in my DOM.

I'm sorry for this noob question, i'm really trying my best to learn React.

Do you know the differences between `state` and `props`? If not, I recommend doing research on that before doing anything with react. — Hung Cao, Mar 20 '19 at 20:59
Possible duplicate of [What is the difference between state and props in React?](https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react) — Hung Cao, Mar 20 '19 at 21:00
Yes, i kinda know. I know that props are suppose to be imutable, and state are usually used in methods and functions that require more workaround. — ncesar, Mar 20 '19 at 21:00
I guess since i wont have any complex function to re-render my DOM and mostly text, i should use props? — ncesar, Mar 20 '19 at 21:03

score 1 · Answer 1 · answered Mar 20 '19 at 21:04

1

State is for properties of your component that change and in turn cause your component to re-render. If you are only passing data down to read, props are a more appropriate choice.

answered Mar 20 '19 at 21:04

erinesco

21
2

Whilst Hermant answer is fine, you have the freedom for that approach, I personally (emaphasis on personally) prefer to only use state for data that will change during the apps usage and needs to be reflected in child components. If it is ‘t going to change, e.g. passing a page header value to a page header component, i’d use a constant in the parent and pass that down. – Chris Adams Mar 20 '19 at 21:24

Hemant Parashar · Accepted Answer · 2019-03-20T21:31:05.473

You should use both state and props in conjunction with one another. You're using both in your code perfectly fine. State is something that is managed by a component and can be passed down to a child via the props. A simple way of understanding this is that you can pass down the Parent component's state (App) to the child (Header) in the form of props which is an important concept in React.

State is both readable and writable whereas props are read only. Also, any change in the components state triggers a re-render.

Here, your state acts as the top/root level for the data that can be passed down to other components if it needs to be used again.

See these for more info.

What is the difference between state and props in React?

https://flaviocopes.com/react-state-vs-props/

Should i use State or Props in this simple ReactJS page?

2 Answers2