3

Obviously I'm no longer using local state as my state is now contained in a Redux container.

But for stateless components I simply pass down data they need using props.

I wanted to verify that this is O.K.?

Below is an example of a stateless component that receives data from it's parent and passes data down to it's child.

The parent element is using Redux. ( Not shown ).

Is there a good reference for this some where? i.e. documentation?

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

const FrameFaveTag = function(props) {
  const bookmarks = props.bookmarks.map((bookmark) =>
    <FrameFaveTagFave bookmark={bookmark} key={bookmark.id} />
  );
  return (
    <div className="bookmark_page" id="{props.tag}" >
      <div className="bookmark_tag_title">
        <p className="bookmark_tag_title_p">
          {props.tag}
        </p>
      </div>
      {bookmarks}
    </div>
  )
}

export default FrameFaveTag;
Ajay Gaur
  • 5,140
  • 6
  • 38
  • 60
  • Hello and welcome to SO. The question "I wanted to verify that this is O.K.?" is too vague to meet community guidelines, so please update your question and title to clarify exactly what you mean in a way that avoids argument and broad interpretation. Also the request for "Is there a good reference for this some where? i.e. documentation?" is always off-topic on SO. – DavidS Nov 24 '17 at 18:27

1 Answers1

0

That depends upon the convention you're following. Whenever I'm making an app, I like to keep the states in redux which are relevant to multiple part of an app. Suppose you're fetching the data when your app mounts for the user account's information, permissions information etc., I'd prefer those to put in my redux state which I can access anywhere in the app. But suppose a state in only meaningful to a component, I'd like to put that in the component's state. An example can be where you're opening/closing a modal or a third pane etc. You can put that in redux state too but it does make sense to put that in React component's state. If you want to make everything a functional component in your app, you might as well want to look at recompose and it's utility methods. This answer from the redux author will give you more insights about when you should definitely store states in redux in your app.

EDIT:

If there is a comparison between whether we should use connect in a component or pass the props from parent then I'll tend to use passing from parent a little better over connect because although connect makes a component only listen to relevant state change for the component and then re-renders yet it has to make comparison checks whether the state relevant to that component has changed or not.

Ajay Gaur
  • 5,140
  • 6
  • 38
  • 60
  • This answer is slightly off topic as I was asking about a stateless component and what is best practice for sending it data - via props or via redux. It has no local state. It simply renders data. –  Nov 24 '17 at 18:11
  • I use `recompose` in my app and write almost every component as stateless and then wraps with the utilities. Also, The question you're asking is opinion based. I don't know how much I'm right but I tend to use `connect` in my app very less. Although `connect` will only listen to the state change relevant to it (in a component) but it'll have to make checks about which states are changed. So, it is better to pass data from parent. I hope I'm understanding you question right. If you feel this is correct, I'll edit my answer. – Ajay Gaur Nov 24 '17 at 18:16