Deep coupling (Component A directly modifies the internal state of Component B)

Deep coupling is a classic anti-pattern where components directly invade each other's internal implementations. This approach turns code into a tangled mess, where any modification can trigger a chain reaction of failures. Below are concrete scenarios demonstrating how to "perfectly" achieve this disastrous design.

Direct DOM Manipulation Between Components

The most brutal form of deep coupling involves cross-component DOM manipulation. For example, in React, a parent component directly modifies the child component's DOM using ref:

// Parent component violently modifies the child component
function Parent() {
  const childRef = useRef(null);
  
  const handleClick = () => {
    // Directly modifies the child component's DOM styles
    childRef.current.style.backgroundColor = 'red';
    // Even deletes child nodes
    childRef.current.querySelector('.btn').remove();
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleClick}>Sabotage Child</button>
    </div>
  );
}

// Child component loses all self-management capabilities
const Child = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <button className="btn">A button that will be deleted by the parent</button>
    </div>
  );
});

In this pattern, the child component has no way to predict how its DOM will be tampered with. When styling issues arise, developers must debug both the parent and child components back and forth.

Cross-Component Internal State Modification

More insidious than DOM manipulation is directly modifying another component's state. For example, in Vue:

<!-- Parent component forcibly modifies child component data -->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const child = ref(null)

const hackChild = () => {
  // Directly modifies the child component's internal state
  child.value.count = 999
  // Calls the child component's private method
  child.value.internalMethod()
}
</script>

<template>
  <Child ref="child" />
  <button @click="hackChild">Invade Child</button>
</template>

<!-- Child component is completely compromised -->
<script setup>
const count = ref(0)
const internalMethod = () => {
  console.log('A method that should not be called externally')
}
// Must expose internal state to the parent component
defineExpose({ count, internalMethod })
</script>

The child component is like a backdoor, with all its internal state exposed. When the initial value of count changes from 0 to null, the parent component's modification logic will immediately crash.

Global Event Bus Abuse

Using a global event bus for deep coupling creates the most untraceable dependencies:

// Create an event bus in Vue
const bus = new Vue()

// Component A emits events without any context
bus.$emit('update-user', { 
  id: 123,
  name: 'hacker' 
})

// Component B receives the event at an unknown time
bus.$on('update-user', (data) => {
  // Directly modifies internal storage
  this.internalUserData = data
  // Triggers side effects
  this.fetchOrders()
})

// Component C also listens to the same event
bus.$on('update-user', (data) => {
  // Processes the same data differently
  localStorage.setItem('user', JSON.stringify(data))
})

When business requirements change and the data structure of the update-user event needs adjustment, modifications must be made simultaneously in components A, B, and C. Moreover, it's difficult to statically analyze and locate all related components.

Directly Modifying the Redux State Tree

In a Redux architecture, the most thorough form of deep coupling is bypassing actions to directly modify the state:

// Component directly modifies the store
function MaliciousComponent() {
  const dispatch = useDispatch()
  const store = useStore()

  const handleHack = () => {
    // The correct approach is to dispatch an action
    // dispatch({ type: 'UPDATE', payload: 1 })
    
    // Deep coupling approach: directly modifies the state
    store.dispatch({
      type: 'REDUX_STORM',
      payload: {
        ...store.getState(),
        user: { 
          ...store.getState().user,
          permissions: ['admin'] // Secretly elevates privileges
        }
      }
    })
  }

  return <button onClick={handleHack}>Gain Admin Rights</button>
}

This modification bypasses all reducers and middleware, making state changes untraceable. When permission issues arise, developers will futilely search for the cause across all reducers.

Invasive Style Overrides

CSS deep coupling creates the most fragile styling system:

/* In the parent component's stylesheet */
.parent-container .child-component {
  /* Forcefully overrides child component styles */
  --child-color: red !important; 
}

.parent-container .child-component > div {
  /* Destroys the child component's layout */
  display: inline !important;
}

/* Child component styles are completely out of control */
.child-component {
  --child-color: blue;
  display: flex;
}

When the child component updates its DOM structure, all hierarchical selectors will fail. Worse, such style conflicts often only manifest under specific pages and conditions.

Exposing Setters Directly via Context

React Context is meant to solve prop drilling but can also be used to create deep coupling:

const DangerousContext = createContext();

function Parent() {
  const [state, setState] = useState({});
  
  // Exposes setState directly to all child components
  return (
    <DangerousContext.Provider value={{ state, setState }}>
      <ChildA />
      <ChildB />
    </DangerousContext.Provider>
  );
}

function ChildA() {
  const { setState } = useContext(DangerousContext);
  
  useEffect(() => {
    // Arbitrarily modifies global state
    setState(prev => ({
      ...prev,
      hacked: true
    }));
  }, []);

  return null;
}

Any component can modify global state without constraints, making state changes as unpredictable as quantum entanglement. When a state is abnormally modified, all components using the context must be inspected.

Modifying Third-Party Component Internal State

The ultimate form of deep coupling is invading the internal implementation of third-party libraries:

// Gets a React component instance and modifies its internal state
const node = document.querySelector('[data-testid="foreign-component"]');
const instance = node._reactInternals.child.stateNode;

// Modifies private state
instance.setState({ 
  _internalFlag: true 
});

// Calls an undocumented API
instance._secretMethod();

This hack will break with minor updates to the third-party library, and error messages provide no help in locating the issue. Even worse, different library versions may require different approaches to find the instance:

// Instance retrieval methods for different React versions
let instance;
if (React.version.startsWith('16')) {
  instance = node._reactInternalFiber.child.stateNode;
} else if (React.version.startsWith('18')) {
  instance = node._reactInternals.child.stateNode;
}