0

In React, where do I keep my variables and functions. I had been keeping them before the render & return statements (in/at the top of the class) but from what I've seen from others, this does not seem right. My guess is that they should be kept within the render method but above the return method, which is where you html goes.

On another, somewhat related note, are constructors still necessary in React or are they implicit.

I also understand that state should be kept out of the parent component for the most part as one small change will cause a re-render of all child components, which is obviously not desired.

Any help with these would be awesome. First question is definitely of most importance to me.

Young Scooter
  • 474
  • 5
  • 14
  • constructors are not necessary. If you need to do something when the class is instantiated then that is where you would do it... to answer your first question the answer is it depends / its complicated. I would define all functions on the class itself instead of in a render method. You can def have variables in the render, but again depends on what they do and or what is needed. If they are more static hardcoded values then that should probably be a property on the class (which you can assign in the constructor :P ) – John Ruddell Aug 16 '18 at 21:10
  • A very philosophical question, to which only same philosophical answer could be given : "your should keep your variables where they should be". If you use var only in one method it should be defined in this method, if in few - keep in constructor, if in few components - in redux. About functions: in most cases it is more clear to use class method than define few functions in one method – Sasha Kos Aug 16 '18 at 21:10
  • 1
    For your first question: https://stackoverflow.com/questions/41369296/react-functions-inside-render and https://stackoverflow.com/questions/41369296/react-functions-inside-render Second question: No, you don't need it if you have proper Babel or any transpiler configuration. For the third question, I don't get the point. If you don't keep your state in a container (say it Parent here) then where do you plan to keep them? In every child component? For the most situations, you will lift your state up, hold it in the parent then pass it to children. Do not think about rerendering so much. – devserkan Aug 16 '18 at 21:14
  • @devserkan I know my application will still fun quickly but just for sanity of understanding why I am even using React, wouldn't the idea be to have a state in each child and ultimately push all these states up to the parent to then display these in a final component (at least for my current purpose). This way I will not re-render every component every time one little thing changes, and I can feel like there is actually a purpose to using react. – Young Scooter Aug 16 '18 at 21:21
  • @JohnRuddell @ SashaKos I like the idea of not having to use a constructor but for some strange reason I am not allowed to declare variables at the top of the class. Only functions and state. Is this why i need a constructor perhaps? – Young Scooter Aug 16 '18 at 21:22
  • Can you give some examples? It doesn't really matter *where* your functions and variables are, so much as what they do and how you use them. – Aaron Beall Aug 16 '18 at 21:24
  • 1
    @YoungScooter, you can use variables without constructor in the class field, just don't use `var`, `let`, or `const` when you define them. For the state part, of course, you will use the state **where you need it**. You are right about that but as you said the bigger your component get you will need a common parent to lift your state up. I mean "do not bother so much", just use the state where you need it. If you need it for a child use there, if you need it in a parent, use there. – devserkan Aug 16 '18 at 21:27
  • This is what I was confused about. It seems you can define variables, but without `var`, `let`, and `const`. It's odd to me. What is the default for when you do do this in the class w/o a classifier? – Young Scooter Aug 16 '18 at 21:32
  • @Aaron Basically like I'm lifting a bunch of states from children components to the parent and I need to save these states into variables. The idea is to have a bunch of little drop down components (children) to send their state up to a table (parent) the parent would like to save these variables and once it has gathered them from all children parse and post the fields to the table as one entry. Store this entries in an array. Like where would I keep this array of data. The way I'm used to doing it and what seems easiest is just above the class as a global var but I know that isn't good practi – Young Scooter Aug 16 '18 at 21:36
  • This is a great example of my confusion with scope: `class App extends React.Component { selectStation; selectedDcp; selectedSensor; state = { selectedMethod: null, startDate: moment(), endDate: moment(), show: false, }; handleDropdown = (selectedOption, id) => { console.log(selectedOption); if (id === 1) selectedStation = selectedOption.label; else if (id === 2) selectedDcp = selectedOption.label; else if (id === 3) selectedSensor = selectedOption.label; }` – Young Scooter Aug 16 '18 at 21:38
  • 1
    @YoungScooter, I don't know what is the default one but what is the default one if you use them in the constructor? `this.foo = "foo"` becomes `foo = "foo"` That is all for class-fields proposal. Getting data from child and keeping them in variables is not a good practice as you see. Probably you can do this with a `state` property again. – devserkan Aug 16 '18 at 21:41
  • I know this is formatted awfully, but basically the variables within the function handleDropdown are not instantiated, even though I just attempted to do this at the beginning if you see `selectStation; selectedDcp; selectedSensor;` – Young Scooter Aug 16 '18 at 21:42
  • @devserkan I know I keep saying this and it sounds dumber every time, but I am really trying to keep states out of the parent. Or else I really do not see the point of even using React, if every component is re-rendering each time a small component changes. Why is keeping class variables bad practice? I'm missing that part. – Young Scooter Aug 16 '18 at 21:44
  • @devserkan right, you use this and then you can refer to the class variables. This seems to work except you cannot display these varaibles on the DOM without passing them to another child and making it one of their states. Seems to work for my purposes. Might actually be content for once. – Young Scooter Aug 16 '18 at 21:46
  • Ok, I don't argue so much about the state since everyone uses React or any library differently. For the class fields variables, constructor runs once when the component mounts the first time. Then how do you plan to update those variables again? – devserkan Aug 16 '18 at 21:53
  • 1
    Not all children will rerender, only the ones with changed props / values – John Ruddell Aug 16 '18 at 22:44
  • Also a lot of what were talking about is code style / theory.. if you want more help on this sharing a codepen or github repo where i can review code and give feedback would be better – John Ruddell Aug 16 '18 at 23:34
  • @devserkan I would think I could instantiate & initialize them in the constructor and for there on out, just assign them to different values when I need to update/change them per usual. Is there something wrong with this? – Young Scooter Aug 17 '18 at 15:56
  • @JohnRuddell appreciate this. Let me update my code so that the children contain their own states and I will try to get this posted to my github where you could give it a look and some tips/comments hopefully. Thank you. – Young Scooter Aug 17 '18 at 15:57
  • Hey @JohnRuddell , here is the link to the code thus far: https://github.com/willbee28/Wali-redo.git. I felt I reached a good stopping point. It is fully functional with some minor picky bugs. All of my states are contained in the parent component, resulting in a re-render of every child upon even the slightest state change (just one state field). Maybe you can figure out/give advice on how to keep every state in children and also if that is the way to go (I believe it is since this seems very inefficient) Thanks a bunch man – Young Scooter Aug 17 '18 at 20:55
  • hey dude, i can take a look in a few hours. I haven't looked yet, but from what you are describing you should look at redux. I can help fix the system and stuff and walk you through that. Lots to talk about if you are going to add something like redux – John Ruddell Aug 17 '18 at 21:01
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178224/discussion-between-young-scooter-and-john-ruddell). – Young Scooter Aug 17 '18 at 21:18
  • sure thing! will reply :) – John Ruddell Aug 17 '18 at 22:10
  • @YoungScooter what does your package.json look like? – John Ruddell Aug 17 '18 at 22:31
  • @JohnRuddell `{ "name": "wali-redo", "version": "0.1.0", "private": true, "dependencies": { "bootstrap": "^3.3.7", "moment": "^2.22.2", "npm": "^6.3.0", "react": "^16.4.1", "react-bootstrap": "^0.32.1", "react-datepicker": "^1.6.0", "react-dom": "^16.4.1", "react-scripts": "1.1.4", "react-select": "^2.0.0", "react-table": "^6.8.6" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } ` – Young Scooter Aug 20 '18 at 15:11

0 Answers0