4 ms·

Then you aren't benefiting from React at all. The point of React is DOM diffing, which you trigger using setState method.

s_y_n_t_a_x 8y ago
When you change the props of a component it re-renders. Just because you use pure functions doesn't mean you don't get DOM diffing, that's silly.
- petilon 8y ago
  At some point you have to have state. See where "state should live" here: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html But the very fact that we're having this debate is proving my point. React's programming model is unnecessarily complicated. JavaScript + DOM is all you need. The simple libs (each less than 500 lines) I pointed to get you close to this without sacrificing productivity or code maintainability while keeping the programming model simple.
- s_y_n_t_a_x 8y ago
  To reply to your last comment, each project is different, and if you just want a few things on a page, sure use a small lib like what you suggested. But at a certain point you start reinventing the wheel and no other developer will be able to jump into it. You need a framework for large projects with a team and potential future members. React isn't complicated, you're making out to be.
rnicholus 8y ago
First off, this is not “the point of React”. Second, direct use of setState is not somehow the only path to focused DOM updates with React. In order to understand this better, I suggest you read up on the topic of Reconciliation in React - https://reactjs.org/docs/reconciliation.html https://reactjs.org/docs/reconciliation.html
hesarenu 8y ago
The point of React is components. Simple components to build complex apps. Dom diffing are just lower level concerns.
- petilon 8y ago
  There are better ways to build components. The problem with React components is that they are only compatible with React. What if there was a way to build components in a better way, and what if those components were compatible with all current and future frameworks? There is a way to do that. Look up W3 Web Components specification. There's sample code here: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder
  - hesarenu 8y ago
    So another library. From the examples i am not impressed. Web-component are not panacea. For me reactjs is still the best frontend framework out there.
deleted 8y ago
[deleted]
crooked-v 8y ago
You're dramatically overexaggerating the complications of global state handling in Redux. For a simple app, you could just use the useState hook, and pass the state-setting callback down into children components: import React, { useState } from 'react'; export const SetterButton = ({ children, ...rest }) => ( <button type="button" {...rest}>{children}</button> ) export const BoxComponent = ({ label }) => { const [value, setValue] = useState(0); return ( <div style={border: '1px solid black'}> {label}: {value} <SetterButton onClick={() => setValue(value + 1)}>+1</SetterButton> </div> ); }; Or for a bigger app with many nested components, you can use context: import React, { useState } from 'react'; export const ValueContext = React.createContext(); export const SubComponent = () => ( <div> <p> Here's a value: <ValueContext.Consumer> {({ value }) => value} </ValueContext.Consumer> </p> <p> Here's a button: <ValueContext.Consumer> {({ setValue, value }) => <button type="button" onClick={() => setValue(value + 1)}>+1</button>} </ValueContext.Consumer> </p> </div> ) export const App = () => { const [value, setValue] = useState(); return ( <ValueContext.Provider value={{ value, setValue }}> Some other stuff goes here. <SubComponent></SubComponent> </ValueContext.Provider> ); } None of this takes a ton of thought. Just make a file for contexts exports and a root level component with any Providers.

s_y_n_t_a_x 8y ago

When you change the props of a component it re-renders. Just because you use pure functions doesn't mean you don't get DOM diffing, that's silly.

petilon 8y ago
At some point you have to have state. See where "state should live" here: https://reactjs.org/docs/thinking-in-react.html https://reactjs.org/docs/thinking-in-react.html But the very fact that we're having this debate is proving my point. React's programming model is unnecessarily complicated. JavaScript + DOM is all you need. The simple libs (each less than 500 lines) I pointed to get you close to this without sacrificing productivity or code maintainability while keeping the programming model simple.
s_y_n_t_a_x 8y ago
To reply to your last comment, each project is different, and if you just want a few things on a page, sure use a small lib like what you suggested. But at a certain point you start reinventing the wheel and no other developer will be able to jump into it. You need a framework for large projects with a team and potential future members. React isn't complicated, you're making out to be.

rnicholus 8y ago

First off, this is not “the point of React”. Second, direct use of setState is not somehow the only path to focused DOM updates with React. In order to understand this better, I suggest you read up on the topic of Reconciliation in React - https://reactjs.org/docs/reconciliation.html https://reactjs.org/docs/reconciliation.html

hesarenu 8y ago

The point of React is components. Simple components to build complex apps. Dom diffing are just lower level concerns.

petilon 8y ago
There are better ways to build components. The problem with React components is that they are only compatible with React. What if there was a way to build components in a better way, and what if those components were compatible with all current and future frameworks? There is a way to do that. Look up W3 Web Components specification. There's sample code here: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder
- hesarenu 8y ago
  So another library. From the examples i am not impressed. Web-component are not panacea. For me reactjs is still the best frontend framework out there.

deleted 8y ago

[deleted]

crooked-v 8y ago

You're dramatically overexaggerating the complications of global state handling in Redux. For a simple app, you could just use the useState hook, and pass the state-setting callback down into children components: import React, { useState } from 'react'; export const SetterButton = ({ children, ...rest }) => ( <button type="button" {...rest}>{children}</button> ) export const BoxComponent = ({ label }) => { const [value, setValue] = useState(0); return ( <div style={border: '1px solid black'}> {label}: {value} <SetterButton onClick={() => setValue(value + 1)}>+1</SetterButton> </div> ); }; Or for a bigger app with many nested components, you can use context: import React, { useState } from 'react'; export const ValueContext = React.createContext(); export const SubComponent = () => ( <div> <p> Here's a value: <ValueContext.Consumer> {({ value }) => value} </ValueContext.Consumer> </p> <p> Here's a button: <ValueContext.Consumer> {({ setValue, value }) => <button type="button" onClick={() => setValue(value + 1)}>+1</button>} </ValueContext.Consumer> </p> </div> ) export const App = () => { const [value, setValue] = useState(); return ( <ValueContext.Provider value={{ value, setValue }}> Some other stuff goes here. <SubComponent></SubComponent> </ValueContext.Provider> ); } None of this takes a ton of thought. Just make a file for contexts exports and a root level component with any Providers.