Tags down


Is using document.getElementById in React an anti-pattern?

By : acblevins
Date : July 31 2020, 05:00 PM
it helps some times In general, refs is better than document.getElementById, because it is more in line with the rest of your react code.
In react, every component class can have multiple component instances. Also using id is dangerous, because react does not prevent you to have multiple forms on 1 page, and then your DOM contains multiple inputs with same ID. And that is not allowed.
code :

Share : facebook icon twitter icon

React component loading pattern (or anti-pattern?)

By : user2964855
Date : March 29 2020, 07:55 AM
hop of those help? The main problem is that you're using an id, which is inflexible and makes assumptions about the rest of the components (because ids must be globally unique).
code :
module.exports = React.createClass({
  componentDidMount: function() {
    // pass a DOM node to the constructor instead of it using an id
    this.component = new Component(this.getDOMNode());

  componentWillUnmount: function() {

  render: function() {
    return <div />;

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

By : Inna Shestakova
Date : March 29 2020, 07:55 AM
hop of those help? How do I select certain bars in react.js? , You can do that by specifying the ref
code :
class MyComponent extends React.Component {
  constructor(props) {
    this.myRef = React.createRef();
  render() {
    return <div ref={this.myRef} />;
const node = this.myRef.current;
<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>
<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>
var object = this.refs.Progress1;
print = () => {
  var object = this.refs.Progress1;  

Is keeping a log of all document relationships an anti-pattern in CouchDB?

By : Edouard Bonnet
Date : March 29 2020, 07:55 AM
this will help I would say using a single document to record the relationships between all other documents could be problematic because
the document "docInUse:bank" could end up being updated frequently. Cloudant allows you to update documents but when you get to many thousands of revisions, then the document size becomes none trivial, because all the previous revision tokens are retained updating a central document invites the problem of document conflicts if two processes attempt to update the document at the same time. You are allowed to have have conflicts, but it is your app's responsibility to manage them see here if you have lots of relationships, this document could get very large (I don't know enough about your app to judge)
code :
  "_id": "1251251921251251",
  "type": "relationship",
  "doc": "bank:1S36U3FDD",
  "usedby": "factor:1I9JTM97D"
  "_id": "bank:1S36U3FDD:factor:1I9JTM97D"
  "added": "2018-02-28 10:24:22"

React anti pattern?

By : Mohammed Jij
Date : March 29 2020, 07:55 AM
With these it helps This is clearly an antipattern and possibly a mistake, depending on conditions. Static class method shouldn't operate with class instance. staticMethod is bound to specific component instance and uses setState, this could be only justified a class is a singleton (though a singleton is often an antipattern, too). This will result in bugs and memory leaks if more than one class instance is expected, and every React component is expected to have more than one instance, at least for testing.
A proper way for two independent components to interact with each other in React is to have a common parent component that provides this interaction, e.g.:
code :
class ModalContainer extends Component {
  modalRef = React.createRef();

  render() {
    return <>
      <Modal ref={this.modalRef} />
      <SomeComponentThatUsesModal modalRef={this.modalRef} />
const ModalContext = React.createContext();

function getModal(modalRef) {
  return {
    open: data => modalRef.current.open(data);
    close: () => modalRef.current.close();

class ModalContainer extends Component {
  modalRef = React.createRef();

  render() {
    return <>
      <Modal ref={this.modalRef} />
      <ModalContext.Provider value={getModal(this.modalRef)}>
const SomeComponentThatUsesModal = props => <div>
    {modal => <button onClick={() => modal.open('foo')} />}

  ...deeply nested component
  <SomeComponentThatUsesModal />

React ref anti-pattern for Popups

By : user3680203
Date : March 29 2020, 07:55 AM
To fix this issue I approve the second, more "React-y", solution because:
It makes sense that your parent holds the shown state. In later uses, you might be really happy to have more flexibility over popup control flow. Your original pattern is much more complex to read and to maintain as you expose an imperative API which is less obvious and usually require additional documentation. Instead, props are simple standard React, are much more predictable and testable. Refs impose the parent/user to bypass React's life cycle by forcing them to check that the ref contains an element at the expected time.
code :
const Component : React.FC = props => {
    const [warningPopupShow, setWarningPopupShow] = useState(false);
    return (
        <button onClick={doDangerButton}>Dangerous button</button>
        <WarningPopup warningText="Warning ! This is a dangerous button !"
            onShow={setWarningPopupShow} // Simply separate "shown" updates from
                                         // acceptation action in the popup
Related Posts Related Posts :
  • Why doesn't the .remove() method also affect the variable it's being set on?
  • React hooks error: Rendered more hooks than during the previous render
  • How to create a completely new Keyword in JavaScript?
  • When summing values from 2 arrays how can I cap the value in the new array?
  • A pop up window to login in
  • How to push spacebar action to array
  • How do i highlight a specific table row depending on the url
  • Truly Weak Reference Event Emitter / Dispatcher: is it possible?
  • Conditionally render a a background image based on current view using React Router
  • Can not retrieve component template while routing
  • How to keep the checkbox status after refreshing the page
  • Array of Object - divide information as per values in it
  • Calculating body style height (for horizontal scroll) in javascript not working
  • How to exclude certain values from randomly generated array
  • Change colour of selected <li>
  • Formatting date object in an Array with moment is giving an unexpected result
  • combineLatest operator alternative
  • 'object' is never reassigned. Use 'const' instead
  • What does the spread operator in ES6 convert to in older JavaScript? Is it costlier than array.concat?
  • Get duplicates in array of strings and count number of duplicates
  • How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'
  • Call a ajax request only if there are ajax requests added to the list
  • Using the jQuery each function to count divs with the same class
  • FInding out the Harshad number
  • angular route is not working and not changing current view
  • Callback executed before function finishes execution
  • How to create subfolder and document on Firestore web?
  • Scroll algorithm -- improving fetch and display of data
  • New To Programming World
  • Using mongorestore to insert many documents into a temp collection
  • How to extend localStorage across devices (without DB)
  • How to do pre increment without using ++I?
  • Retrieve filterViewId from batchUpdate request addFilterView
  • What is the corresponding instanceof target for text nodes?
  • How to Test the API by Token on Postman?
  • How to set Bootstrap dropdown menu on hover?
  • In Slate.js editor.apply(operation) is not applying "split_node" operations correctly
  • No data in GET response
  • Javascript using if else to determine array value
  • Error when I run npm install Error: 404 Not Found: 7zip-bin@~4.1.0
  • I want to modified my JSON output using JS
  • Error in Entry module not found and in webpack
  • Submit button is not submitting the form after changing the button type
  • Why is the function created is not working.?
  • How can I do day timer with javascript?
  • Tap screen to trigger autofocus with getUserMedia
  • Unable to bind html table data to mvc controller Model
  • How can I simply work around a missing JS property in an object in an object?
  • How to add anything at a specific position in a string using vanilla javascript
  • using async methods inside of array.map() in javascript
  • Math.random() vs random() in Khan Academy Computer Programming
  • Call two functions with onPress in react native
  • Use a global variable inside promise javascript
  • Turn array of objects into array of properties
  • Would having a Pure Class concept make sense or not?
  • Why catch invoked with success promise?
  • Match whole word if it meets a condition
  • Inserting items into array with bracket syntax doesnt affect length?
  • adding value inside an input - React
  • How does setInterval() run independently of sequential execution?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org